Conflict with table tr:hover border and col border - css

Question

there is a conflict with style borders in a table.
Tested in Firefox 91.0.2 (64 bit)
It is said that mainly the cell borders should be styled.
It is not that there is no solution by tricking. It is rather the case that there is a conflict.
There are complex hierarchies when styling the borders. The last one takes effect.
General:
table
thead, tbody, tfoot
tr, col
th, td
Special:
border-top, border-right
border-bottom, border-left
The General Hierarchy prevents column-borders from being styled if cell-borders are styled. Only tricks can solve this problem. !important does not solve the problem.
Likewise, row-borders cannot be styled if cell-borders are styled. This is very complex when styling with tr:hover. Correct would be styling with tr:hover td. But there is also a conflict.
There is a trick.
With border-top and border-bottom:
For this only the cell-border-top may be styled. Because these are overwritten by the row-border-bottom (see hierarchy above).
For border-left and border-right:
Only the cell-border-right may be styled for this purpose. Because these are overwritten by the column-border-left (see hierarchy above).
So it is possible to solve the problem with some tricks. However, I am not looking for a trick, but for a solution to the conflict.
In the example the following should work (and at this point don't work without tricks):
cells (th, td): border = 1px solid #fff
column 2 (.col2): border-left, border-right = 1px solid #000
row hover (tr:hover): border-top, border-bottom = 1px solid #000
table {
border-collapse: collapse;
text-align: right;
cursor: default;
}
th {
background: #ccc;
text-align: center;
}
th, td {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
}
.col0 {
background: #ddd;
}
.col2 {
border-right: 1px solid #000;
border-left: 1px solid #000;
}
tbody tr:hover td {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.c0 {
background: #fff;
}
.c1 {
background: #f8a;
}
.c2 {
background: #b3c;
}
.c3 {
background: #aa6;
}
.c4 {
background: #cf9;
}
.c5 {
background: #9dd;
}
.c6 {
background: #0f8;
}
.c7 {
background: #44f;
}
.c8 {
background: #88b;
}
<table>
<colgroup>
<col class="col0">
<col class="col1">
<col class="col2">
<col class="col3">
<col class="col4">
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>COL 1</th>
<th>COL 2</th>
<th>COL 3</th>
<th>COL 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="c0"></td>
<td class="c0"></td>
<td class="c5">8,36</td>
<td class="c4">15,24</td>
</tr>
<tr>
<td>2</td>
<td class="c1">95,35</td>
<td class="c3">36,25</td>
<td class="c6">45,38</td>
<td class="c3">28,73</td>
</tr>
<tr>
<td>3</td>
<td class="c2">37,25</td>
<td class="c4">15,24</td>
<td class="c8">41,25</td>
<td class="c5">8,36</td>
</tr>
<tr>
<td>4</td>
<td class="c7">97,64</td>
<td class="c3">28,73</td>
<td class="c0">36,94</td>
<td class="c0">8,36</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>SUM</th>
<th>---</th>
<th>---</th>
<th>---</th>
<th>---</th>
</tr>
</tfoot>
</table>
https://jsfiddle.net/d9kju4sr/1/