§ ITPOW >> 文档 >> XHTML

table-td 的样式宽度与样式边框

作者:vkvi 来源:ITPOW(原创) 日期:2008-9-4

可以使用样式表为 td 设置宽度和边框,我们这里称之为样式宽度和样式边框。

本文不适用于 Firefox 中 XHTML 网页,此时无论如何边框都不占用样式宽度。

一、概要

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

  • 如果为 table 指定了样式宽度,则包含。
  • 如果没有为 table 指定样式宽度,则不包含,也就是说表格的实际宽度等于:样式宽度 + 样式边框 * 边框数,如果 border-collapse 为 collapse,则边框可能会重叠,这样边框数要少些。

二、边框分配

似乎很简单,但还有一种情况,那就是指定了 table 样式宽度,但不是每个单元格都有边框,此时各个单元格根据自己的宽度来共同“承担”这些边框,如果大家都是一样宽,那么承担的边框就是一样多。

注意,我们只讨论各 td 样式宽度之和恰好等于 table 样式宽度,不然由于兼容性的原因情况会很复杂。

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


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

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

结果分别如下:

table 边框分配

白色块为 12px 的边框,红绿相间的为标尺,通过观察,我们发现,并不因为 border 在 第三个 td 中设置,就让其独自“承担”该边框,而是大家共同“承担”,通过比较与标尺的错位,发现 td 越宽,它“承担”的份量就越重。

三、边框分配不均

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


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

结果如下:

边框分配(不均)

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

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

相关文章