title: Make tables overflow to new line if max-width reached?
body: <p>I am trying to design a table which will display data pulled from a database in somewhat of a graphical form. I would love for the table to have the functionality to overflow to the next line when the collective 'td's have reached a max-width that is set by the table. </p>
  
  <p>Example: table width set to 30% (lets say for argument's sake thats 100px) and the tds have a width of 10px. When there have been 11 tds entered, the 11th moves to a newline and continues displaying there.</p>
  
  <p>Here is what I have so far:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td class='green'&gt;&lt;/td&gt;
          &lt;td class='green'&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td class='green'&gt;&lt;/td&gt;
          &lt;td class='green'&gt;&lt;/td&gt;
          &lt;td class='green'&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;    
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td class='green'&gt;&lt;/td&gt;
          &lt;td class='green'&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>td{
      width:10px;
      height:10px;
      border: 1px solid black;
  }
  table{
      max-width:30%;
  }
  
  .green {
      background:green;
  }
  </code></pre>
  
  <p>Link to fiddle: <a href="http://jsfiddle.net/hDsts/160/" rel="nofollow noreferrer">http://jsfiddle.net/hDsts/160/</a></p>
  
  <p>Currently, if another <code>&lt;td&gt;</code> is added it just resizes all of them to fit within the max-width set by the table. I want it to overflow to the next line.</p>
  
  <p>Any suggestions on how to solve this problem or of other ways I could accomplish this goal?</p>