I have encountered a problem where certain borders take precedence over others when using the border-collapse: collapse styling in a table. Specifically, when setting the border-right on a cell, it appears above the border-left. Is there a way to adjust the z-index of a border or achieve a similar effect?
Below is a code snippet to better demonstrate the issue:
table{
border-collapse: collapse;
width: 200px;
height: 100px;
text-align: center;
}
td{
border: 3px solid black;
}
#specialCell{
border-right: 3px solid blue;
}
#otherSpecialCell{
border-left: 4px solid green;
}
#redBorder{
border-left: 4px solid red;
}<table>
<tbody>
<tr>
<td></td>
<td></td>
<td id="otherSpecialCell"> 1 </td>
<td></td>
</tr>
<tr>
<td></td>
<td id="specialCell"> 2 </td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<p>
The border on the "otherSpecialCell" needs to be 4px in order to display, while the "specialCell" only requires 3px for its border to show. This demonstrates that border-right has priority over border-left.
</p>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td id="redBorder"> 3 </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<p> The red border appears above both the top and middle borders of the table.</p>
<p> Can this behavior be controlled without adjusting border widths?</p> Furthermore, although removing the border-collapse: collapse may provide a similar outcome as individually setting left and right borders, the sharp edges can result in an unattractive appearance.