CODEWITHSUNDEEP
htmlcsshtml-table
Evan Patches Angelico
Evan Patches Angelico

Reputation: 33

Auto resize columns in a table within a div container html

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.

Upvotes: 3

Views: 8781

Answers (2)

user1470118
user1470118

Reputation: 412

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.

Upvotes: 1

dezman
dezman

Reputation: 19358

The best solution would be to put your content in divs, with each float: left; and specify the height and width of each. If you really must use a table, you will have to look into Media Queries in order to adjust your stylesheet based on the size of the users browser window. But this will be much more complicated.

Upvotes: 0

Related Questions