CSS: How to toggle the borders of a specific table column without twitching

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>