Pro HTML5 and CSS3 Design Patterns

CHAPTER 16 ■ TABLE COLUMN LAYOUT

Equal Content-Sized Columns

HTML

<h1>Equal Content-Sized Columns</h1>

<h2>Shrinkwrapped Table</h2>

<table class="auto-layout shrinkwrapped">

<tr> <td class="p2">2=50%</td> <td class="p2">50%</td></tr></table>

<!-- Additional tables are not shown -->

CSS

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

.shrinkwrapped { width:auto; }

.p2 { width:50%; } /* 2 columns */

.p3 { width:33.5%; } /* 3 columns */

.p4 { width:25%; } /* 4 columns */

.p5 { width:20%; } /* 5 columns */

.p6 { width:16.5%; } /* 6 columns */

.p7 { width:14.1%; } /* 7 columns */

.p8 { width:12.3%; } /* 8 columns */

.p9 { width:11%; } /* 9 columns */

.p10 { width:10%; } /* 10 columns */

/* Nonessential styles are not shown */