Resize delle tabelle imparando da GMail
Grandi aziende come Google hanno migliaia di programmatori per poter curare nei minimi dettagli le interfacce delle loro applicazioni Web, anche sfruttando degli hacks degli standard e dei browser, per ottenere alla fine un risultato che massimizzi l'usabilità per l'utente.
Nel caso specifico, vediamo un layout a tabella, in cui il contenuto di una colonna vada in overflow in modo controllato senza incasinarsi quando si ridimensiona il browser.
Questo è quello che succede nelle colonne subject di GMail.
Il trucco sta tutto nell'usare un table-layout fixed nella definizione del CSS per la tabella nel suo insieme, quindi specificare solo la larghezza delle colonne che non devono avere l'overflow nascosto e mettere l'overflow: hidden nel css relativo alle celle.
.grid { table-layout: fixed;}
.grid * td { empty-cells: show; overflow: hidden; width: 100%;}
Grazie a opencomponentry per la segnalazione
Aumenta la diffusione di questo articolo View blog reactions
