Pro HTML5 and CSS3 Design Patterns

CHAPTER 16 ■ TABLE COLUMN LAYOUT

Shrinkwrapped Columns

HTML

<h1>Shrinkwrapped Columns</h1>

<table class="auto-layout shrinkwrap">

<tr>

<td class="shrinkwrap">auto</td>

<td class="shrinkwrap">auto</td>

</tr>

</table>

<br />

<table class="auto-layout shrinkwrap">

<tr> <td class="shrinkwrap">auto (less content - less width)</td>

<td class="shrinkwrap">auto (extra content turns shrinkwrapped columns

into content-proportioned columns)</td></tr></table>

CSS

table { border-collapse:collapse; }

td { overflow:hidden; }

.auto-layout { table-layout:auto; }

.shrinkwrap { width:auto; }

/* Nonessential styles are not shown */