table宽度一样宽_table－td 的样式宽度与样式边框

可以使用样式表为 td

设置宽度和边框，我们这里称之为样式宽度和样式边框。

本文不适用于 Firefox 中 XHTML

网页，此时无论如何边框都不占用样式宽度。

一、概要

td 的样式宽度是否包含了样式边框的宽度呢？

如果为 table 指定了样式宽度，则包含。

如果没有为 table 指定样式宽度，则不包含，也就是说表格的实际宽度等于：样式宽度 + 样式边框 * 边框数，如果

border-collapse 为 collapse，则边框可能会重叠，这样边框数要少些。

二、边框分配

似乎很简单，但还有一种情况，那就是指定了 table

样式宽度，但不是每个单元格都有边框，此时各个单元格根据自己的宽度来共同“承担”这些边框，如果大家都是一样宽，那么承担的边框就是一样多。

注意，我们只讨论各 td 样式宽度之和恰好等于 table

样式宽度，不然由于兼容性的原因情况会很复杂。

两个示例说明上面的问题：

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

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

结果分别如下：

白色块为 12px 的边框，红绿相间的为标尺，通过观察，我们发现，并不因为 border 在 第三个 td

中设置，就让其独自“承担”该边框，而是大家共同“承担”，通过比较与标尺的错位，发现 td 越宽，它“承担”的份量就越重。

三、边框分配不均

上面举的例子是边框宽度刚好能够被各单元格分配，如果无法整除，怎么办呢？

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

结果如下：

中间为标尺，发现不管在哪个单元格指定边框，都是由右边单元格来“承担”。进一步发现，即使为左单元格指定 1px 的左边框，该边框也是由右边单元格来“承担”。

上面谈的是两个单元格，如果是多个单元格，情况还要复杂得多，以致于各浏览器在“承担”分配上，都出现了细微的差距，由于用得少，较复杂，就不再讨论了。

本文来源：千一网络 http://www.cftea.com/