title: Auto resize columns in a table within a div container html
body: <p>I'm looking for a solution (preferably in css or html) to make it so that my table which is inside a div container to squish its &lt;td>'s so that they stay inside the div container when the browser is resized. <a href="http://lux.physics.ucdavis.edu/public/new_website/kkdijlsis2311/ex.html" rel="nofollow">http://lux.physics.ucdavis.edu/public/new_website/kkdijlsis2311/ex.html</a> Notice how as you change the broswer size the contents of the cells change size but I want the size of the cells to be fixed and the columns change. So if the browser was small the table would be something like 2 columns rather than 6.  Example html code:</p>
  
  <pre><code>&lt;div id="imageline"&gt;
      &lt;table width="100%"&gt;
      &lt;tr&gt;
           &lt;td&gt;Stuff, maybe an image&lt;/td&gt;
           &lt;td&gt;Stuff, maybe an image&lt;/td&gt;
           &lt;td&gt;Stuff, maybe an image&lt;/td&gt;
           &lt;td&gt;Stuff, maybe an image&lt;/td&gt;
           &lt;td&gt;Stuff, maybe an image&lt;/td&gt;
           &lt;td&gt;Stuff, maybe an image&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
           &lt;td&gt;Stuff, maybe an image&lt;/td&gt;
           &lt;td&gt;Stuff, maybe an image&lt;/td&gt;
           &lt;td&gt;Stuff, maybe an image&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Css code:</p>
  
  <pre><code>#imageline {
  width: 100%;
  position:relative;
  }
  </code></pre>
  
  <p>I feel like this can be solved with simple css. I keep trying different combinations of where the width:100% goes but things don't work out. Any insight is very much appreciated.</p>