Pro HTML5 and CSS3 Design Patterns

CHAPTER 16 ■ TABLE COLUMN LAYOUT

Flex Columns

HTML

<h1>Flex Columns</h1>

<h2>Sized, Stretched, or Fixed Table</h2>

<table class="fixed-layout sized"><tr><td class="sized1">200px</td>

<td class="p1">20%</td> <td class="sized2">100px</td>

<td class="flex">auto flex</td> <td class="flex">auto flex</td></tr></table>

<h2>Sized or Stretched — Oversized</h2>

<table class="auto-layout sized"><tr><td class="sized1">200px</td>

<td class="p1">20%</td> <td class="sized3">500px</td>

<td class="flex">auto flex</td> <td class="flex">auto flex</td></tr></table>

<h2>Fixed — Oversized</h2>

<table class="fixed-layout sized"><tr><td class="sized1">200px</td>

<td class="p1">20%</td> <td class="sized3">500px</td>

<td class="flex">auto flex</td> <td class="flex">auto flex</td></tr></table>

CSS

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

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

.sized { width:700px; }

.stretched { width:100%; }

.flex { width:auto; }

.sized1 { width:200px; }

.sized2 { width:100px; }

.sized3 { width:500px; }

.p1 { width:20%; }

.fixed-layout .p1{ padding:0; }

/* Nonessential styles are not shown */