Pro HTML5 and CSS3 Design Patterns

CHAPTER 16 ■ TABLE COLUMN LAYOUT

362

Content-Proportioned Columns

HTML

<h1>Content-Proportioned Columns</h1>

<h2>Sized Table</h2>

<table class="auto-layout sized">

<tr> <td class="auto-width">auto</td>

<td class="auto-width">auto (more content - more width)</td></tr></table>

<h2>Stretched Table</h2>

<table class="auto-layout stretched">

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

<td class="auto-width">auto (same content - same width)</td></tr></table>

<h2>Shrinkwrapped Table</h2>

<table class="auto-layout shrinkwrapped">

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

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

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

CSS

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

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

.sized { width:700px; }

.stretched { width:100%; }

.shrinkwrapped { width:auto; }

.auto-width { width:auto; }

/* Nonessential styles are not shown */