JSFiddle - React, Tailwind, and code Playground

by Jacob Stamm

HTML

<table class="my-table">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td colspan="42">Section 1</td>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tbody>
    <tr>
      <td colspan="42">Section 2</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>      
  </tbody>
</table>

CSS

.my-table {
    border-collapse: collapse;
}
    .my-table td,
    .my-table th {
        text-align: left;
        padding: 6px 8px;
        align-content: center;
        box-sizing: border-box;
    } 
    .my-table td[colspan="42"] {
      text-align: center;
      background-color: lightgray;
    }
    .my-table th {
        padding-top: 12px;
        padding-bottom: 12px;
        background-color: #0e3e64;
        color: white;
        text-align: center;
    }
    .my-table tr:not(:first-child) {
        border: 1px solid #efefef;
    }
    
    /*here's the styling I don't want applied to that third tr in my table*/
    .my-table tr:first-child {
        border: 1px solid #0e3e64;
    }