function toggleBorders() {
table.tHead.firstElementChild.children[1].classList.toggle('thick-border');
Array.from(table.tBodies[0].children).forEach(row => row.children[1].classList.toggle('thick-border'));
}
table {
border-collapse: collapse;
}
th.thick-border,
td.thick-border {
border: 3px solid coral;
border-top: none;
border-bottom: none;
}
<table id="table">
<thead>
<tr>
<th>h1</th> <th>h2</th> <th>h3</th> <th>h4</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td> <td>12</td> <td>13</td> <td>14</td>
</tr>
<tr>
<td>21</td> <td>22</td> <td>23</td> <td>24</td>
</tr>
</tbody>
</table>
<br>
<button id="btn" onclick="toggleBorders()">Click Me!</button>
Is there any way to toggle the column’s borders without twitching?
And without thickening initial border width of other columns?
Maybe with shadows or gradients or somehow else