title: HTML tables: how to stack columns rather than rows for mobile display?
body: <p>For an html table with vertical headers, how would I stack columns rather than rows for mobile display? In other words, achieve an output that looks like this on mobile:</p>
  
  <p>A1</p>
  
  <p>A2</p>
  
  <p>A3</p>
  
  <p>B1</p>
  
  <p>B2</p>
  
  <p>B3</p>
  
  <p>C1</p>
  
  <p>C2</p>
  
  <p>C3</p>
  
  <p>In a normal table (horizontal headers), this mobile effect is quite easy. See example (mobile width set absurdly large to force effect on desktop):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
  border: 1px solid grey;
  border-collapse: collapse;
  }
  
  th {
  border: 1px solid grey;
  padding: 10px;
  }
  
  td {
  border: 1px solid grey;
  padding: 10px;
  }
  
  @media screen and (max-width: 20000px) {
  table {width:100%;}
  thead {display: none;}
  tr:nth-of-type(2n) {background-color: inherit;}
  tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}
  tbody td {display: block;  text-align:center;}
  tbody td:before { 
      content: attr(data-th); 
      display: block;
      text-align:center;  
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
  &lt;thead&gt;
  &lt;tr&gt;
  &lt;th&gt;Header A&lt;/th&gt;
  &lt;th&gt;Header B&lt;/th&gt;
  &lt;th&gt;Header C&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
  &lt;td&gt;A1&lt;/td&gt;
  &lt;td&gt;B1&lt;/td&gt;
  &lt;td&gt;C1&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;A2&lt;/td&gt;
  &lt;td&gt;B2&lt;/td&gt;
  &lt;td&gt;C2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;A3&lt;/td&gt;
  &lt;td&gt;B3&lt;/td&gt;
  &lt;td&gt;C3&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But for my irregular table (vertical headers), I'm utterly lost on how to achieve that same effect. See example (no attempt at the mobile effect, just the table):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
  border: 1px solid grey;
  border-collapse: collapse;
  }
  
  th {
  border: 1px solid grey;
  padding: 10px;
  }
  
  td {
  border: 1px solid grey;
  padding: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class='comparison-table'&gt;
   &lt;tr&gt;
    &lt;th&gt;Header A&lt;/th&gt;
    &lt;td&gt;A1 &lt;/td&gt;
    &lt;td&gt;A2&lt;/td&gt;
    &lt;td&gt;A3&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;th&gt;Header B&lt;/th&gt;
    &lt;td&gt;B1&lt;/td&gt;
    &lt;td&gt;B2&lt;/td&gt;
    &lt;td&gt;B3&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;th&gt;Header C&lt;/th&gt;
    &lt;td&gt;C1&lt;/td&gt;
    &lt;td&gt;C2&lt;/td&gt;
    &lt;td&gt;C3&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;th&gt;Header D&lt;/th&gt;
    &lt;td&gt;D1&lt;/td&gt;
    &lt;td&gt;D2&lt;/td&gt;
    &lt;td&gt;D3&lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Anyone have any idea how I can do for the second table, roughly the same thing I did for the first table?</p>
  
  <p>Thanks a ton!</p>