Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML table column widths: combining fixed and variable widths

I've made a table as such:

<table style="width:1000px;">
  <tr>
    <td>aaa</td>
    <td id="space"></td>
    <td class="fixed-width">bbb</td>
    <td class="fixed-width">ccc</td>
  </tr>
</table>

How would I do the CSS so that the b and c columns have a fixed width, the a column only takes as much space as needed, and the space column to expand to fill the rest of the table?

like image 902
whotemp Avatar asked Nov 19 '11 00:11

whotemp


1 Answers

I'm no CSS guru, but it just didn't seem right that there'd be no way to do this. This appears to work in Firefox and IE7. I have not checked other browsers.

The first shrink-to-fit <col> is set (using CSS) to 0 width, so it shrinks to fit the content.

The second space <col> is set (using CSS) to a width larger than will fit in the table.

The width of the last two fixed-width <col>s is not on the <col>. Instead, it's set on the <td> style. This forces the column width.

<!DOCTYPE html>
<html>
    <head>
        <title>cols</title>
        <style type="text/css">
            td.fixed-width {
                width: 100px;
                background-color:aqua
            }
            td.min-width {background-color:aqua}
            td.space {border: thick blue solid}
        </style>
    </head>
    <body style="width:1100px; font-family:sans-serif">
        <table style="width:1000px;">
            <col style="width:0"/>
            <col style="width:1000px"/>
            <col span="2" />
            <tr>
                <td class="min-width">aaa</td>
                <td class="space"></td>
                <td class="fixed-width">bbb</td>
                <td class="fixed-width">ccc</td>
            </tr>
            <tr>
                <td class="min-width">aaa asdfasdf asdfsad</td>
                <td class="space"></td>
                <td class="fixed-width">bbb fasdas</td>
                <td class="fixed-width">ccc vdafgf asdf adfa a af</td>
            </tr>
        </table>
    </body>
</html>
like image 174
Ed Staub Avatar answered Sep 19 '22 15:09

Ed Staub