分享

table-table 与 td 边框重叠问题

 四分之三光棍 2012-05-22
table-table 与 td 边框重叠问题

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

<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>

FF 结果如下:

table 与 td 边框重叠问题

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

IE 结果如下:

IE 中 table 与 td 边框重叠问题

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

兼容性

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

表格线常见问题:

1.表格边框与表格单元格线的重叠。[采用border-collapse:collapse解决]

2.嵌套表格与被嵌套表格边线重叠问题。[采用border-top|left|right|bottom解决]

3.嵌套表格与被嵌套表格对不齐的问题。[采用;解决]

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多