title: HTML Table Responsive, Horizontal to Vertical
body: <p>I have an HTML table which is 2-3 rows, various column count, generally from 4-8.  The table can be placed into a container of various width; sometimes a fixed width (like a sidebar), and other times the width of the window.</p>
  
  <p>What I would like to be able to do is change the orientation of the table if the container isn't large enough to hold the width of the table.  I do not want the contents of the table to wrap.</p>
  
  <p>So if Horizontal:</p>
  
  <pre><code>Date        Match 1   Match 2   Match 3   Match 4
  1/6/2019     3-4       1-2       5-6       7-8
  1/16/2019    1-7       4-6       3-5       2-8
  </code></pre>
  
  <p>Now if the window changes width and the contents of this table cannot fit, it should display:</p>
  
  <pre><code>Date       1/6  1/16
  Match 1    3-4   1-7
  Match 2    1-2   4-6
  Match 3    5-6   3-5
  Match 4    7-8   2-8
  </code></pre>
  
  <p>I've contemplated a number of ways to do this:</p>
  
  <ul>
  <li>Flexbox (can't figure that one out for this situation)</li>
  <li>Generate two tables, one is hidden, and have javascript determine if the table fits into the container width, and if not, flip the visibility of the table to show the vertical one</li>
  <li>scrollable container and leave the table horizontal (I don't like that method at all)</li>
  </ul>
  
  <p>What do you think the best way to solve this is?</p>