Pro HTML5 and CSS3 Design Patterns

CHAPTER 16 ■ TABLE COLUMN LAYOUT

Undersized Columns

HTML

<h1>Undersized Columns</h1>

<h2>Fixed Table</h2>

<table class="fixed-layout sized">

<tr> <td class="undersized">18px</td> <td class="flex">auto</td></tr></table>

<h2>Sized Table — cannot be undersized</h2>

<table class="auto-layout sized">

<tr> <td class="undersized">18px</td> <td class="flex">auto</td></tr></table>

CSS

td { overflow:hidden; }

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

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

.sized { width:700px; }

.stretched { width:100%; }

.undersized { width:18px; }

.flex { width:auto; }

/* Nonessential styles are not shown */