"Standard" way to reduce table column width to fit child element

Question

I have a table with a known width, 776 pixels, and three columns. The third column has a known width, 216 pixels, but the other two do not have known widths. The behavior I want is for the second column to have the same width as its child element. Whatever width is left over, 776 - 216 - 2nd, would be the width for the first column.

I found an example that sets the width of the column that should have its width minimized to 1 pixel. This does seem to work, but it seems like it is a hack and I don't understand why it works. Is there a more "standard" way to achieve the same result?

Here is my HTML with inline CSS as an example:

<table style="width:776px; height:48px;">
    <tr>
        <td style="height:48px;">
            <!-- Note: Setting font size to zero prevents white space from contributing to an inline block element's width -->
            <div style="background:#f0f0f0; border:solid 2px #808080; font-size:0; margin-left:8px; text-align:center;">
                <a href="#"><h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Art</h3></a>
                <a href="#"><h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Events</h3></a>
                <a href="#"><h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Papers</h3></a>
                <a href="#"><h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Research</h3></a>
            </div>
        </td>
        <!-- Note: Setting width to one pixel removes horizontal spacing -->
        <td style="vertical-align:middle; width:1px; height:48px;">
            <h3 style="margin-left:8px;"><label for="search">Search:</label></h3>
        </td>
        <td style="vertical-align:middle; width:216px; height:48px;">
            <input id="search" style="margin-left:8px; width:208px;" type="text" value="" maxlength="32">
        </td>
    </tr>
</table>

Answer 1

Well, an easy way would be to set the 1st cell to width: 100%. That would force it to fill as much as it can the parent table's width. Then, to the third cell, you put a 216px content element (like a div).

The table's cell always try to respect its content. So this way, the 2nd div would be squized in the middle, just respecting its own content. The 3rd one would respect its 216px content, and the 1st would fill up the rest.

Working JsFiddleExample

<table>
    <tr>
        <td>1stContent</td> <!-- Fills what it can -->
        <td>2ndContent</td> <!-- Squized in the middle -->
        <td>
            <!-- Will respect the width of its content -->
            <div class="dv3rd">
                216px
            </div>
        </td>
    </tr>
</table>

CSS:

table {
    width: 776px;
    background: silver;
}

td:nth-child(1) {
    width: 100%;
    background: red;
}

td:nth-child(2) {
    background: green;
}

td:nth-child(3) {
    background: blue;
}

.dv3rd {
    width: 216px;
}

However

As well commented, you should not be using tables for the page layout. A simple replacement would be working with css tables, where your divs can act like display: table and display: table-cell elements.

Here's the same example, but using div's instead:

Working JsFiddleExample - Tableless

<div class="table">
    <div>
        1stContent
    </div>
    <div>
        2ndContent
    </div>
    <div>
        <div class="dv3rd">
            216px
        </div>
    </div>
</div>

CSS:

.table {
    width: 776px;
    background: silver;
    display: table;
}

.table > div:nth-child(1) {
    display: table-cell;
    width: 100%;
    background: red;
}

.table > div:nth-child(2) {
    display: table-cell;
    background: green;
}

.table > div:nth-child(3) {
    display: table-cell;
    background: blue;
}

.dv3rd {
    width: 216px;
}