Pro HTML5 and CSS3 Design Patterns

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 */