CODEWITHSUNDEEP
csscss-tablescolumn-width
EvilPuppetMaster
EvilPuppetMaster

Reputation: 8350

CSS to make a table column take up as much room as possible, and other cols as little

I need to layout a html datatable with CSS.

The actual content of the table can differ, but there is always one main column and 2 or more other columns. I'd like to make the main column take up as MUCH width as possible, regardless of its contents, while the other columns take up as little width as possible. I can't specify exact widths for any of the columns because their contents can change.

How can I do this using a simple semantically valid html table and css only?

For example:

| Main column                           | Col 2 | Column 3 |
 <------------------ fixed width in px ------------------->
 <------- as wide as possible --------->
 Thin as possible depending on contents: <-----> <-------->

Upvotes: 11

Views: 9116

Answers (3)

daveomcd
daveomcd

Reputation: 6565

I've not had success with width: 100%; as it seems that without a container div that has a fixed width this will not get the intended results. Instead I use something like the following and it seems to give me my best results.

.column-fill { min-width: 325px; }

This way it can get larger if it needs to, and it seems that the browser will give all the extra space to whichever column is set this way. Not sure if it works for everyone but did for me in chrome (haven't tried others)... worth a shot.

Upvotes: 1

Dan
Dan

Reputation: 63480

Similar to Alexk's solution, but possibly a little easier to implement depending on your situation:

<table>
    <tr>
        <td>foo</td>
        <td class="importantColumn">bar</td>
        <td>woo</td>
        <td>pah</td>
    </tr>
</table>

.importantColumn{
    width: 100%;
}

You might also want to apply white-space:nowrap to the cells if you want to avoid wrapping.

Upvotes: 9

Alexander Kojevnikov
Alexander Kojevnikov

Reputation: 17742

I'm far from being a CSS expert but this works for me (in IE, FF, Safari and Chrome):

td.zero_width {
    width: 1%;
}

Then in your HTML:

<td class="zero_width">...</td>

Upvotes: 6

Related Questions