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

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;">
<h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Art</h3>
<h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Events</h3>
<h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Papers</h3>
<h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Research</h3>
</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;
}

Answer 2

I found the reason why this work's in BoltClocks link (in the comments): http://www.w3.org/TR/CSS21/tables.html#auto-table-layout
...This algorithm may be inefficient since it requires the user agent
to have access to all the content in the table before determining the
final layout and may demand more than one pass.
Column widths are determined as follows:
Calculate the minimum content width (MCW) of each cell: the formatted content may span any number of lines but may not overflow the cell box. If the specified 'width' (W) of the cell is greater than MCW, W is the minimum cell width. A value of 'auto' means that MCW is the minimum cell width...
Answer:
Calculate the minimum content width (MCW) of each cell: the formatted content ... may not overflow the cell box.