样式宽度,总结都写在示例中

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



同时用样式表为 table、td 指定了边框后,可能会发生重叠,这取决于 border-collapse。

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

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

<table>
  <tr>
    <td>
   
<table style="border:1px solid red;">
  <tr>
    <td style="border:1px solid blue;"> </td>
    <td style="border:1px solid blue;"> </td>
    <td style="border:1px solid blue;"> </td>
    <td style="border:1px solid blue;"> </td>
  </tr>
</table>
   
    </td>
    <td>
   
<table style="border:1px solid red;border-collapse:collapse;">
  <tr>
    <td style="border:1px solid blue;"> </td>
    <td style="border:1px solid blue;"> </td>
    <td style="border:1px solid blue;"> </td>
    <td style="border:1px solid blue;"> </td>
  </tr>
</table>
   
    </td>
  </tr>
</table>

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

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

FF 结果如下:

<?xml version="1.0" encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html xmlns="; <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> </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> </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> </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;"> </td> <td style="width:100px;border:1px solid red;"> </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;"> </td> <td style="width:100px;border:1px solid red;"> </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>

一、概要

图片 1

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

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

  • 左边是未指定 border-collapse 的(默认为 separate)。
  • 右边是指定了 border-collapse 为 collapse 的。

 

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

IE 结果如下:

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

二、边框分配

图片 2


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

  • 左边是未指定 border-collapse 的(默认为 separate)。
  • 右边是指定了 border-collapse 为 collapse 的。

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

兼容性

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

可以看出在发生重叠时,Firefox 是用 td 覆盖 table 的,而 IE 是用 table 覆盖 td 的。

<table cellspacing="0" cellpadding="0" style="width:200px;border-collapse:collapse;"> <tr> <td style="width:50px;background-color:#999900;"> </td> <td style="width:50px;background-color:#009999;"> </td> <td style="width:50px;background-color:#990099;border-right:12px solid white;"> </td> <td style="width:50px;background-color:#999999;"> </td> </tr> </table> <table cellspacing="0" cellpadding="0"> <tr> <td style="width:50px;background-color:#CC0000;"> </td> <td style="width:50px;background-color:#00CC00;"> </td> <td style="width:50px;background-color:#CC0000;"> </td> <td style="width:50px;background-color:#00CC00;"> </td> </tr> </table>

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

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


<table cellspacing="0" cellpadding="0" style="width:300px;border-collapse:collapse;"> <tr> <td style="width:150px;background-color:#999900;"> </td> <td style="width:50px;background-color:#009999;"> </td> <td style="width:50px;background-color:#990099;border-right:12px solid white;"> </td> <td style="width:50px;background-color:#999999;"> </td> </tr> </table> <table cellspacing="0" cellpadding="0"> <tr> <td style="width:150px;background-color:#CC0000;"> </td> <td style="width:50px;background-color:#00CC00;"> </td> <td style="width:50px;background-color:#CC0000;"> </td> <td style="width:50px;background-color:#00CC00;"> </td> </tr> </table>

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

结果分别如下:

图片 3

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

三、边框分配不均

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

<table cellspacing="0" cellpadding="0" style="width:100px;border-collapse:collapse;"> <tr> <td style="width:50px;background-color:#009999;border-right:1px solid red;"> </td> <td style="width:50px;background-color:#999900;"> </td> </tr> </table> <table cellspacing="0" cellpadding="0" style="width:100px;border-collapse:collapse;"> <tr> <td style="width:50px;background-color:#CC0000;"> </td> <td style="width:50px;background-color:#00CC00;"> </td> </tr> </table> <table cellspacing="0" cellpadding="0" style="width:100px;border-collapse:collapse;"> <tr> <td style="width:50px;background-color:#009999;"> </td> <td style="width:50px;background-color:#999900;border-left:1px solid red;"> </td> </tr> </table>

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

结果如下:

图片 4

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

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

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

本文由美高梅4688官方网站发布于美高梅4688官方网站,转载请注明出处:样式宽度,总结都写在示例中

您可能还会对下面的文章感兴趣: