<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 结果如下：

css兼容性 table 与 td 边框重叠问题-风君雪科技博客

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

IE 结果如下：

css兼容性 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.嵌套表格与被嵌套表格对不齐的问题。[采用table-layout: fixed;解决]