同时用样式表为 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 结果如下:
- 左边是未指定 border-collapse 的(默认为 separate)。
- 右边是指定了 border-collapse 为 collapse 的。
IE 结果如下:
- 左边是未指定 border-collapse 的(默认为 separate)。
- 右边是指定了 border-collapse 为 collapse 的。
兼容性
可以看出在发生重叠时,Firefox 是用 td 覆盖 table 的,而 IE 是用 table 覆盖 td 的。