title: Responsive table headers not showing
body: <p>I am looking for a solution for a responsive HTML table and the closest CSS solution I have found is:</p>
  
  <pre><code>@media screen and (max-width: 600px) {
    table thead {
      border: none;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }
  
    table tr {
      border-bottom: 3px solid #ddd;
      display: block;
    }
  
    table td {
      border-bottom: 1px solid #ddd;
      display: block;
      text-align: right;
    }
  
    table td::before {
      content: attr(data-label);
      float: left;
    }
  }
  </code></pre>
  
  <p>However, the issue with this is I need to have a static <code>data-label</code> for each of my <code>td</code> so that the column header will, which is not very scalable. Does anyone know a way I can write the CSS that will automatically show the column header without me having to specify <code>data-label</code>? Here is my jsfiddle with the current solution where I manually specify <code>data-label</code>:</p>
  
  <p><a href="https://jsfiddle.net/tgpfhn8m/1051/" rel="nofollow noreferrer">https://jsfiddle.net/tgpfhn8m/1051/</a></p>