JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1" id="parent">
  <tr>
    <th>Tab1</th>
    <th>Tab1</th>
    <th>Tab1</th>
    <th>Tab1</th>
    <th>Tab1</th>
  </tr>
  <tr>
    <td colspan="5" class="gap"><table border="1">
        <tr>
          <th>Head 1</th>
          <th>Head 2</th>
          <th>Head 3</th>
          <th>Head 4</th>
        </tr>
        <tr>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
      </table></td>
  </tr>
</table>

CSS

table{border-collapse: collapse}
    td.gap{padding:5px}


#parent > tbody > tr > th { background: red; }