table－Firefox + XHTML + collapse 边框与宽度（补）

作者：vkvi 来源：ITPOW（原创）日期：2008-9-4

table－样式宽度
table－border 与样式边框
table－border-collapse:collapse;
table－td 的样式宽度与样式边框
table－table 与 td 边框重叠问题
table－总结
table－Firefox + XHTML + collapse 边框与宽度（补）

在 Firefox 中，如果文档类型为 XHTML，同时指定了 border-collapse 为 collapse，则对边框与宽度的解释大不相同。

这里列出来供大家参考，总结都写在示例中，由于涉及到细微的边框问题，建议您先按 Windows 键 + U 键，启动放大器。为了方便，这里是把样式直接写在标签中的，虽然不符合规范，但效果是一样的。注意：本示例适用于 Firefox，不适用于 IE，部分适用于 Chrome。: (。

<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>

<body>

<p style="font-weight:bold;">--table--</p>
<p>separate，表格边框包含在 width 中。</p>
<table cellspacing="0" cellpadding="0" style="width:100px;border:10px solid red;border-collapse:separate;">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
<table cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
  <tr>
    <td style="width:100px;background-color:#999900;color:white;text-align:center;">100px</td>
  </tr>
</table>

<p>collapse，表格边框被平均分为“内边框”、“外边框”，“内边框”包含在 width 中，“外边框”不包含在 width 中，“外边框”不占

空间。</p>
<table cellspacing="0" cellpadding="0" style="width:100px;border:10px solid red;border-collapse:collapse;">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
<table cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
  <tr>
    <td style="width:5px;background-color:#009900;"></td>
    <td style="width:90px;background-color:#999900;color:white;text-align:center;">90px</td>
    <td style="width:5px;background-color:#009900;"></td>
  </tr>
</table>

<p>collapse，当边框无法平均分为两份时，左边框的“外边框”等于“内边框”加 1，右边框则相反。</p>
<table cellspacing="0" cellpadding="0" style="width:100px;border:1px solid red;border-collapse:collapse;">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
<table cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
  <tr>
    <td style="width:0px;background-color:#009900;"></td>
    <td style="width:99px;background-color:#999900;color:white;text-align:center;">99px</td>
    <td style="width:1px;background-color:#009900;"></td>
  </tr>
</table>

<p style="font-weight:bold;">--td--</p>
<p>collapse，未指定 table 宽度时，td 的边框不占用 td 的 width。</p>
<table cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
  <tr>
    <td style="width:100px;border:1px solid red;">&nbsp;</td>
    <td style="width:100px;border:1px solid red;">&nbsp;</td>
  </tr>
</table>
<table cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
  <tr>
    <td style="width:100px;background-color:#999900;color:white;text-align:center;">100px</td>
    <td style="width:1px;background-color:#009900;"></td>
    <td style="width:100px;background-color:#999900;color:white;text-align:center;">100px</td>
  </tr>
</table>

<p>collapse，指定 table 宽度时，td 边框的解释同 table。</p>
<table cellspacing="0" cellpadding="0" style="width:200px;border-collapse:collapse;">
  <tr>
    <td style="width:100px;border:1px solid red;">&nbsp;</td>
    <td style="width:100px;border:1px solid red;">&nbsp;</td>
  </tr>
</table>
<table cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
  <tr>
    <td style="width:99px;background-color:#999900;color:white;text-align:center;">99px</td>
    <td style="width:1px;background-color:#009900;"></td>
    <td style="width:99px;background-color:#999900;color:white;text-align:center;">99px</td>
    <td style="width:1px;background-color:#009900;"></td>
  </tr>
</table>

</body>
</html>

[Ctrl+A 全部选择提示：您可先修改部分代码，再按运行]

table－样式宽度
table－border 与样式边框
table－border-collapse:collapse;
table－td 的样式宽度与样式边框
table－table 与 td 边框重叠问题
table－总结
table－Firefox + XHTML + collapse 边框与宽度（补）

电邮：cftea@126.com