JSFiddle - React, Tailwind, and code Playground

by Arthur Lutkevichus

HTML

<table class="separated">
  <tbody>
    <tr>
      <td colspan="2"><b>Group 1</b></td>
    </tr>
    <tr>
      <td>item1</td>
      <td>item2</td>
    </tr>
    <tr>
      <td>item3</td>
      <td>item4</td>
    </tr>
  </tbody>

  <tbody class="selected">
    <tr>
      <td colspan="2"><b>Group 2</b></td>
    </tr>
    <tr>
      <td>item1</td>
      <td>item2</td>
    </tr>
    <tr>
      <td>item3</td>
      <td>item4</td>
    </tr>
    <tr>
      <td>item5</td>
      <td>item6</td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <td colspan="3"><b>Group 2</b></td>
    </tr>
    <tr>
      <td>item1</td>
      <td>item2</td>
    </tr>
    <tr>
      <td>item3</td>
      <td>item4</td>
    </tr>
  </tbody>
</table>

CSS

table {
  margin: 10px;
}

tr:not(.spacing) {
  background: lime;
}

tr.spacing {
  height: 10px;
}

td {
  padding: 2px 5px;
  border: 0;
}

tbody:after {
  content: "";
  display: table;
  height: 10px;
}


.selected>tr {
  border: 1px solid red;
}

.selected>tr:not(:first-child) {
  border-top: 0;
}
.selected>tr:not(:last-child) {
  border-bottom: 0;
}