После обновления 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>
Как решить эту проблему без удаления относительной позиции и свернутых границ ?