Controllare la larghezza delle tabelle

Come sottolinea giustamente Roger Johansson a chiusura del post, si tratta di una di quelle cose che magari in tanti sanno, ma che uno (anche bravo come lui aggiungo io) magari scopre solo quando se ne presenta l'occasione.

Partiamo dall'esempio di partenza che propone. Si parla di controllare la larghezza delle tabelle via CSS per impedire che sbordino e vadano ad inficiare il layout. La soluzione? Usare la proprietà  CSS table-layout:fixed. Che serve a mantenere le dimensioni nei limiti (esempio 2), ma che nulla può di fronte al testo che eccede la misura.

Un piccolo ritocco (proprietà  CSS3 word-wrap:break-word) e sistemiamo anche questo problema: esempio 3.

Tutto bene su Safari e su IE 6 e 7. Non su Opera e Firefox (provare per credere). Per questi browser è necessario ricorrere anche ad un overflow:hidden, con cui si arriva all'esempio 4.