Search code examples
csscss-tablescolumn-width

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: <-----> <-------->
Solution

  • 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>