JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<table>
  <thead>
    <tr>
      <td colspan="4" class="noborder">
        <div class="inner">
          <table>
            <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
  </tbody>
</table>

CSS

table{
  border-spacing: 1px 0px;
  width: 50%;
  margin: 0 auto;
}

.inner{
  background: red;
  border-radius: 5px;
  border: 1px solid #444;
  box-shadow: inset 0 2px 2px -1px #fff;
}

.inner table{
  width: 100%;
}

td{
  width: 25%;
  padding: 25px 0;
  text-align: center;
  border-bottom: 1px dotted #ccc;
}

td.noborder, .inner td{
border: 0;
}