Auto resize columns in a table within a div container html
===

Im 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 <td>'s so that they stay inside the div container when the broswer is resized. http://lux.physics.ucdavis.edu/public/new_website/kkdijlsis2311/ex.html 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 broswer was small the table would be something like 2 columns rather than 6.  Example html code:

    <div id="imageline">
        <table width="100%">
        <tr>
             <td>Stuff, maybe an image</td>
             <td>Stuff, maybe an image</td>
             <td>Stuff, maybe an image</td>
             <td>Stuff, maybe an image</td>
             <td>Stuff, maybe an image</td>
             <td>Stuff, maybe an image</td>
        </tr>
        <tr>
             <td>Stuff, maybe an image</td>
             <td>Stuff, maybe an image</td>
             <td>Stuff, maybe an image</td>
        </tr>
        </table>
    </div>

Css code:

    #imageline {
    width: 100%;
    position:relative;
    }

I feel like this can be solved with simple css. I keep trying different combinations of where the width:100% goes but things dont work out. Any insight is very much appreciated :)