While there are numerous discussions online about Chrome's rendering issues with table borders in CSS, I have come across a frustrating inconsistency specifically with the border applied to the <tr> element. In the example below where I set border-bottom: 1px solid #000 on the <tr>, Chrome displays thicker borders on the first, third, and fifth rows. Surprisingly, changing the border width to 0.5px or 2px results in consistent rendering across all rows. This issue does not seem to affect Firefox. Could this be a bug unique to Chrome? Are there any workarounds besides adjusting the border width from 1 pixel? You can also view the problem in action on CodePen here.
*Edit: It is worth mentioning that I am using Windows 11 on a 4k monitor with scaling enabled in display settings, which raises the possibility of an OS-related cause.
table {
border-collapse: collapse;
width: 100%;
}
thead {
border-bottom: 2px solid #000;
}
thead th {
font-weight: bold;
padding: 15px 0;
}
tbody td {
padding: 20px 0;
}
tbody tr {
border-bottom: 1px solid #000;
}<table>
<thead>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<th>Heading 4</th>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
</table>