table-table 与 td 边框重叠问题

作者:vkvi 来源:千一网络(原创) 日期:2008-9-4

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

<table>
  <tr>
    <td>
   
<table style="border:1px solid red;">
  <tr>
    <td style="border:1px solid blue;">&nbsp;</td>
    <td style="border:1px solid blue;">&nbsp;</td>
    <td style="border:1px solid blue;">&nbsp;</td>
    <td style="border:1px solid blue;">&nbsp;</td>
  </tr>
</table>
   
    </td>
    <td>
   
<table style="border:1px solid red;border-collapse:collapse;">
  <tr>
    <td style="border:1px solid blue;">&nbsp;</td>
    <td style="border:1px solid blue;">&nbsp;</td>
    <td style="border:1px solid blue;">&nbsp;</td>
    <td style="border:1px solid blue;">&nbsp;</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 楼:谢谢!
    谢谢你了!