A "standard" way to reduce the width of a table column to fit a child

Question

I have a table with a known width, 776 pixels and three columns. The third column has a known width of 216 pixels, but the other two have no width. The behavior I want for the second column is the same width as its child. No matter what width is left, 776 - 216 - 2nd will be the width for the first column.

I found an example that sets the width of a column, the width of which should be minimal to 1 pixel. This seems to work, but it looks like it's 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 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

I found the reason why this work is in the BoltClocks link (in the comments): http://www.w3.org/TR/CSS21/tables.html#auto-table-layout

... This algorithm may be inefficient, as it requires a user agent to have access to the entire contents of the table before the final layout and may require more than one pass.

Column widths are defined as follows:

• Calculate the minimum content width (MCW) of each cell: formatted content can span any number of lines, but cannot overflow a cell box. If the specified cell width (W) 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) for each cell: formatted content ... cannot overflow a cell box.

Answer 2

Well, an easy way is to set the 1st cell to width: 100% . This will make it fill as much as possible for the width of the parent table. Then, in the third cell, you place a 216px content 216px (for example, << 22>).

The table cell always try to respect its contents. Thus, the 2nd divisor will shrink in the middle, simply observing its own content. The third will respect its 216px content, and the 1st will fill 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

In addition, you should not use tables for page layout. A simple replacement will work with css tables, where your divs can act as display: table and display: table-cell elements.

Here is the same example, but a div is used instead:

Working JsFiddleExample - No Tables

 <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; }