title: How can I make a "Table" where rows wrap horizontally in HTML5 /css3?
body: <p>I have the following table using html table, tr, td tags. 
  <a href="https://i.stack.imgur.com/MLDC0.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/MLDC0.jpg" alt="enter image description here"></a></p>
  
  <p>This is all great, but I am using angular, and the problem is if I have more rows, I don't have the space for it vertically. Instead I want to "overflow" to the right of it so that it looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/WRYqm.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/WRYqm.jpg" alt="enter image description here"></a></p>
  
  <p>What is the best way using HTML5/CSS so that I can make it such that content spills over if it exceeds the table? Note that in some cases I may have 2 or 3 entries, so I am hoping I don't have to make the width double the size of normal at the start, and instead have the table be sized based on the number of entries I have in the table. No scrollbars.</p>
  
  <p>I feel like the table tag in HTML is limiting and may not allow me to do this. What is the best way to do this? Using divs?</p>
  
  <pre><code>&lt;table style="background:green;"&gt;
  &lt;tr&gt;&lt;td&gt;Name&lt;/td&gt;&lt;td&gt;Sport&lt;/td&gt;&lt;td&gt;Score&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Jordan&lt;/td&gt;&lt;td&gt;Soccer&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Jordan&lt;/td&gt;&lt;td&gt;Soccer&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Jordan&lt;/td&gt;&lt;td&gt;Soccer&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Attempting a flexbox approach, though it seems that if I put the flexbox in a div, then the background doesn't appear to fill properly once the entries go beyond the first column:</p>
  
  <p><a href="https://jsfiddle.net/t0h7w2hw/" rel="noreferrer">https://jsfiddle.net/t0h7w2hw/</a></p>