CodePen

HTML

            
              <table>
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th colspan="3">Super</th>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Super</th>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Super</th>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>
            
          
!

CSS

            
              table {
  width: 20em;
}

th {
  background: #BBB;
  font-weight: normal;
  text-align: left;
}

tbody + tbody th:before {
  background: #FFF;
  content: '';
  display: block;
  height: 2em;
  margin: -1px;
  padding: 1px;
  position: relative;
}

tbody th {
  background: #000;
  color: #FFF;
}

td {
  background: #DDD;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................