When using border-top with border-collapse, the last row of table becomes smaller in height by border-width / 2 pixels. For example, with 2px border, the last row is 1px smaller; with 10px border, it is 5px smaller and so on...
Why does this happen and how can I fix it?
/* Just for styling. Writes each cell's height in it. */
document.querySelectorAll('td')
.forEach((cell) => {
cell.innerHTML = cell.offsetHeight + "px";
});table {
border-collapse: collapse;
}
.t1 tr {
border-top: solid 2px black;
}
.t2 tr {
border-top: solid 100px black;
}
/* Just for styling */
td {
padding: 12px 40px;
color: white;
}<h2>2px border</h2>
<table class="t1">
<tr style="background: cornflowerblue">
<td></td>
</tr>
<tr style="background: brown">
<td></td>
</tr>
<tr style="background: olive">
<td></td>
</tr>
</table>
<h2>100px border</h2>
<table class="t2">
<tr style="background: cornflowerblue">
<td></td>
</tr>
<tr style="background: brown">
<td></td>
</tr>
<tr style="background: olive">
<td></td>
</tr>
</table>Update
The problem shows itself when you want to sort columns.
In a normal, static table, that 1px isn't a huge deal; nobody will notice it. But when you want to change the order of rows (by sorting), there is a "jump".
