CHAPTER 16 ■ TABLE COLUMN LAYOUT
Inverse-Proportioned Columns
HTML
<h1>Inverse-proportioned Columns</h1>
<h2>Shrinkwrapped Table</h2>
<table class="auto-layout shrinkwrapped">
<tr> <td class="p1">20%</td></tr></table>
<table class="auto-layout shrinkwrapped">
<tr> <td class="p1">20%</td>
<td class="p1">20%</td>
<td class="p1">20%</td>
<td class="p1">20%</td>
<td class="p1">20%</td></tr></table>
<table class="auto-layout shrinkwrapped">
<tr> <td class="p1">20%</td>
<td class="p2">50%</td></tr></table>
CSS
.auto-layout { table-layout:auto; }
.shrinkwrapped { width:auto; }
.p1 { width:20%; }
.p2 { width:50%; }
/* Nonessential styles are not shown */