Question

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 <td>’s so that they stay inside the div container when the browser 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 browser 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 don’t work out. Any insight is very much appreciated.

Answer 1

Well, unfortunately it’s not that simple. If you think about it, in your example you have 6 columns on one row, and then three on the other. You won’t be able to just move the objects outside of the row because as you would expect, the table is designed to keep everything in the specified row(s).

So, the best way to go about that is to use DIV’s with the float option.
Here is a brief example of what I’m talking about.