JSFiddle - React, Tailwind, and code Playground

by ErikE

HTML

<!--[if lte IE 8]>
<style type="text/css">
   tbody tr.odd { background-color: #EEEEEE; }
   tbody:hover tr.odd { background-color: #E3E3E3 }
</style>
<![endif]-->
<table>
   <thead>
      <tr>
         <th>MAIN HEADER</th>
         <th>SECOND COLUMN</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th>Sub-Header 1</th>
         <th>Header Stuff 1</th>
      </tr>
      <tr>
         <td>Contents of row 1</td>
         <td>Stuff</td>
      </tr>
      <tr class="odd">
         <td>Contents of row 2</td>
         <td>More Stuff</td>
      </tr>
      <tr>
         <td>Contents of row 3</td>
         <td>Stuff</td>
      </tr>
      <tr class="odd">
         <td>Contents of row 4</td>
         <td>Stuff</td>
      </tr>
   </tbody>
   <tbody>
      <tr>
         <th>Sub-Header 2</th>
         <th>Header Stuff 2</th>
      </tr>
      <tr>
         <td>Contents of row 1</td>
         <td>Stuff</td>
      </tr>
   </tbody>
   <tbody>
      <tr>
         <th>Sub-Header 3</th>
         <th>Header Stuff 3</th>
      </tr>
      <tr>
         <td>Contents of row 1</td>
         <td>Stuff</td>
      </tr>
      <tr class="odd">
         <td>Contents of row 2</td>
         <td>Stuff</td>
      </tr>
   </tbody>
</table>

CSS

html {
  font-family: Verdana, Arial, Tahoma, sans-serif;
  font-size: 0.8em;
}

table {
  border-collapse: collapse;
}

td,
th {
  padding: 1px 2px;
}

thead {
  color: white;
  background-color: black;
}

tbody th {
  color: #FFF;
  font-weight: bold;
  background-color: #c27408;
  text-align: left;
}

tbody tr:nth-child(odd) {
  background-color: #dddddd;
}

tbody td,
tbody th {
  border: solid #ad6f18;
  border-width: 0 1px;
}

tbody:hover th {
  background-color: #e78700;
}

tbody:hover td,
tbody:hover th {
  border-color: #c27408;
}

tbody tr td:first-child,
tbody tr th:first-child {
  border-left-style: none;
}

tbody tr td:last-child,
tbody tr th:last-child {
  border-right-style: none;
}

tbody:hover tr:nth-child(odd) {
  background-color: #dddddd;
}

tbody:hover tr:hover td {
  background-color: #ddba38;
}

tbody:hover {
  background-color: #F6F6F6;
}