将chrome更新到最新版本(73.0.3683.86)后,我们发现表格边框中的空白出现问题。
我发现,它与 td
的相对位置,表格的折叠边框 >和 rowspan 对于某些单元格不止一个。
在Chrome中:https://i.imgur.com/qL9jZ1G.png
在Firefox中:https://i.imgur.com/BJr5AHP.png
table {
border-collapse: collapse;
}
table tr>td {
border: 1px solid red;
position: relative;
}
<table>
<tr>
<td rowspan="5">
<p>some text</p>
</td>
<td rowspan="3">
<p>some text</p>
</td>
<td>
<p>some text</p>
</td>
<td>
<p>some text</p>
</td>
</tr>
<tr>
<td>
<p>some text</p>
</td>
<td>
<p>some text</p>
</td>
</tr>
<tr>
<td>
<p>some text</p>
</td>
<td>
<p>some text</p>
</td>
</tr>
<tr>
<td>
<p>some text</p>
</td>
<td>
<p>some text</p>
</td>
<td>
<p>some text</p>
</td>
</tr>
<tr>
<td>
<p>some text</p>
</td>
<td>
<p>some text</p>
</td>
<td>
<p>some text</p>
</td>
</tr>
<tr>
<td rowspan="2">
<p>some text</p>
</td>
<td>
<p>some text</p>
</td>
<td>
<p>some text</p>
</td>
<td>
<p>some text</p>
</td>
</tr>
<tr>
<td>
<p>some text</p>
</td>
<td>
<p>some text</p>
</td>
<td>
<p>some text</p>
</td>
</tr>
</table>
如何不删除相对位置和折叠边框来解决此问题?