Pro HTML5 and CSS3 Design Patterns

CHAPTER 16 ■ TABLE COLUMN LAYOUT

Column Width

HTML

<h1>Column Width</h1>

<h2>Percentage widths trump fixed widths, which trump auto widths.</h2>

<table class="auto-layout sized">

<tr> <td class="a i">auto</td><td class="a">auto</td> <td class="a">auto</td>

<td class="a">auto</td> <td class="a">auto</td></tr>

<tr> <td class="a">auto</td> <td class="b i">75px</td> <td class="b">75px</td>

<td class="b">75px</td> <td class="b">75px</td></tr>

<tr> <td class="a">auto</td> <td class="a">auto</td> <td class="c i">150px</td>

<td class="c">150px</td> <td class="c">150px</td></tr>

<tr> <td class="a">auto</td> <td class="a">auto</td> <td class="a">auto</td>

<td class="d i">10%</td> <td class="d">10%</td></tr>

<tr> <td class="a">auto</td> <td class="a">auto</td> <td class="a">auto</td>

<td class="a">auto</td> <td class="e i">50%</td></tr>

</table>

CSS

.i { background-color:black; color:white; font-weight:bold; }

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

.sized { width:700px; }

.a { width:auto; }

.b { width:75px; }

.c { width:150px; }

.d { width:10%; }

.e { width:50%; }

/* Nonessential styles are not shown */