Bug fix: max-width:100% per le immagini nelle tabelle

Ho riscontrato un problema in Firefox. Le immagini messe in una tabella ignorano la regola max-width:100%, mantengono invece sempre la loro dimensione originale, questo è ovviamente un fastidio quando tentiamo di ridimensionare la pagina nei nostri layout responsive.

Di norma dovremmo evitare di usare le tabelle per fare i layout, ma è ovvio che in certi casi sia necessario e anzi opportuno usarle, per esempio per mostrare una serie di dati, e questi potrebbero prevedere l’inclusione di immagini.
Oppure, in un caso ancora più semplice, può capitare che il cliente usando l’editor TinyMCE si crei una tabella e ci inserisca le sue cose, di nuovo succederebbe il problema con le immagini.

La prima cosa che ci viene in mente sarebbe mettere la regola max-width anche alla tabella ed alla cella dove sta l’immagine. Purtroppo questo non funziona, quella regola è solo per elementi di tipo block.
La <table> quindi dobbiamo lasciarla con dimensione width:100%. Eventualmente possiamo dare un valore percentuale alla width anche delle celle.
Per ottenere quello che vogliamo esiste poi una proprietà quasi sconosciuta: table-layout. Il codice è il seguente.

table {
  width:100%;
  table-layout: fixed;
}

Table-layout

Questa è una proprietà di CSS2 supportata ormai da tutti i browser.

• auto (è il default): la width della colonna è determinata dal contenuto, viene preso il più largo. Può essere una operazione lenta perché deve calcolare tutto il contenuto della tabella prima di assegnare il valore.
• fixed: il layout della tabella dipende solo dalla larghezza della tabella e dalle sue colonne, non dal contenuto delle celle. Quindi il rendering è più veloce, mostra le righe appena le ottiene.
• inherit: prende il valore dal parent. Questo non è supportato da IE7 e inferiori.