JSFiddle - React, Tailwind, and code Playground

HTML

<table class="grouped-columns-table">
  <colgroup class="content-group"><col><col></colgroup>
  <colgroup class="content-group-spacer"></colgroup>
  <colgroup class="content-group"><col><col></colgroup>
  <thead>
      <tr>
          <th>Col A1</th><th>Col A2</th>
        <th class="content-group-spacer"></th><!-- SPACER -->
          <th>Col B1</th><th>Col B2</th></tr>
  </thead>
 <tbody>
    <tr>
        <td>A1</td><td>A2</td>
        <td class="content-group-spacer"></td><!-- SPACER -->
        <td>B1</td><td>B2</td>
     </tr>
 </tbody>
</table>

CSS

.grouped-columns-table {
  border-collapse: collapse;
}

.content-group {
    border: 1px solid blue;
}

.content-group-spacer {
    width: 15px;
}

.grouped-columns-table td:not(.content-group-spacer),
.grouped-columns-table th:not(.content-group-spacer) {
    border: 1px solid #ccc;
}