Pro HTML5 and CSS3 Design Patterns

CHAPTER 16 ■ TABLE COLUMN LAYOUT

Sized Columns

HTML

<h1>Sized Columns</h1>

<h2>Shrinkwrapped Table</h2>

<table class="auto-layout shrinkwrapped">

<tr> <td class="sized1">200px</td> <td class="sized2">300px</td></tr></table>

<h2>Fixed Table</h2>

<table class="fixed-layout min-width1">

<tr> <td class="sized1">200px</td> <td class="sized2">300px</td></tr></table>

<h2>Maximum-width Sized Columns</h2>

<div class="sized2">

<table class="auto-layout shrinkwrapped">

<tr> <td class="sized1">200px</td><td class="sized2">300px</td></tr></table></div>

<h2>Minimum-width Sized Columns</h2>

<table class="fixed-layout min-width2">

<tr> <td class="sized1">200px</td> <td class="sized2">300px</td></tr></table>

CSS

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

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

.shrinkwrapped { width:auto; }

.min-width1 { width:1px; } .min-width2 { width:700px; }

.sized1 { width:200px; } .sized2 { width:300px; }

/* Nonessential styles are not shown */