Automatically resize columns in table in html div container

Question

I am looking for a solution (preferably in css or html) to make it so that my table located in the div container compresses it <td> so that they stay inside the div container when resizing the browser, http: //lux.physics. ucdavis.edu/public/new_website/kkdijlsis2311/ex.html Note that when you resize the browser, the contents of the cells change size, but I want the size of the cells to be fixed and the columns to be changed. Therefore, if the browser was small, the table would be something like 2 columns, not 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 this can be solved with simple css. I continue to try different combinations, where the width: 100% goes, but everything fails. Any insight is greatly appreciated.

Answer 1

Well, unfortunately, this is not so simple. If you think about it, in your example you have 6 columns on one row, and then three on the other. You cannot just move objects outside the line, because, as you would expect, the table is designed to store everything in the specified lines.

So, the best way to do this is to use a DIV with the float option. Here is a brief example of what I'm talking about.

Answer 2

A better solution would be to place your content in a div with each float: left; and indicate the height and width of each. If you really have to use a spreadsheet, you will have to search Media Queries to customize your stylesheet based on the size of your browser window. But it will be much more difficult.