Pro HTML5 and CSS3 Design Patterns

CHAPTER 16 ■ TABLE COLUMN LAYOUT

Mixed Column Layouts

HTML

<h1>Mixed Column Layouts</h1>

<h2>Shrinkwrapped, Stretched, or Sized Tables</h2>

<table class="auto-layout stretched"> <tr> <td class="sized1">500px</td>

<td class="p1">10%</td> <td class="flex">auto</td></tr></table>

<table class="auto-layout stretched"> <tr> <td class="sized1">500px</td>

<td class="sized2">200px</td> <td class="p3">40%</td>

<td class="p1">10%</td> <td class="flex">auto</td></tr></table>

<table class="auto-layout stretched"> <tr> <td class="sized1">500px</td>

<td class="sized2">200px</td> <td class="p4">80%</td>

<td class="p2">20%</td> <td class="flex">auto</td></tr></table>

<h2>Fixed Table</h2>

<table class="fixed-layout stretched"> <tr> <td class="sized1">500px</td>

<td class="sized2">200px</td> <td class="p4">80%</td>

<td class="p2">20%</td> <td class="flex">auto</td></tr></table>

CSS

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

.shrinkwrapped { width:auto; }

.stretched { width:100%; }

.flex { width:auto; }

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

.p1 { width:10%; } .p2 { width:20%; }

.p3 { width:40%; } .p4 { width:80%; }

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

/* Nonessential styles are not shown */