How to fix border prioritization with css "border-collapse: collapse" style in a table

user_9059409 0
Viewed 399

I am running into the issue that some borders have a higher priority than others when using the border-collapse: collapse styling in a table. For example when border-right on a cell is set it will have a higher priority and be shown on top of a border-left. Is there any way to set the z-index of a border or something to a similar effect?

I have attached a code snippet below to further illustrate what I mean.

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" has to be 4px large to be able to show up while the border on the "specialCell" only has to be 3px large before it shows up. (showing. that border-right has precidence 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 is drawn above the top border aswell as the border along the middle of the table.</p>

<p>Is there any way to control any of this other than by changing the width of the borders?</p>

Additionally, I understand that I can get rid of the border-collapse: collapse styling and have a somewhat similar effect with setting left and right borders individually but the result is fairly unpleasing because of the triangular edges to the borders.

html-table css html javascript
1 Answers

If you don't mind seeing a little bit of black you can use border-spacing: 0px; instead of border-collapse: collapse.

table{
  border-spacing: 0px;
  width: 200px;
  height: 100px;
  text-align: center;
}

td{
  border: 3px solid black;
}

#specialCell{
  border-right: 3px solid blue;
}

#otherSpecialCell{
  border-left: 3px solid green;
}

#redBorder{
  border-left: 3px 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" has to be 4px large to be able to show up while the border on the "specialCell" only has to be 3px large before it shows up. (showing. that border-right has precidence 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 is drawn above the top border aswell as the border along the middle of the table.</p>

<p>Is there any way to control any of this other than by changing the width of the borders?</p>

user_138845490
Related