Proprietà CSS table-layout
Usa la proprietà CSS table-layout per gestire il layout di celle, righe e colonne delle tabelle. Scopri i valori e gli esempi.
La proprietà CSS table-layout imposta l'algoritmo che il browser utilizza per calcolare la larghezza delle celle, delle righe e delle colonne di una tabella. Prevede due possibili algoritmi — auto e fixed — e la scelta tra i due influenza sia il dimensionamento della tabella che la velocità di rendering.
Questa pagina spiega come funziona ciascun algoritmo, quando usare fixed e i problemi (come l'overflow del testo) che ne derivano.
Come funzionano i due algoritmi
auto (il valore predefinito) lascia che sia il contenuto a determinare la larghezza delle colonne. Il browser deve leggere ogni cella di ogni riga prima di poter eseguire il layout, quindi allarga ciascuna colonna per adattarsi al suo contenuto più lungo. Questo produce una tabella dall'aspetto naturale, ma significa anche che può spostarsi mentre arriva altro contenuto, e parole molto lunghe possono espandere una colonna oltre il previsto.
fixed ignora il contenuto della maggior parte delle celle e dimensiona le colonne in base alla proprietà width della tabella, alle larghezze esplicite delle colonne (sulle celle della prima riga o sugli elementi <col>), più bordi e spaziatura delle celle. Poiché il layout non dipende più da ogni singola cella, il browser può renderizzare la tabella in un unico passaggio.
Ci sono due motivi pratici per scegliere fixed:
- Prestazioni. Con
auto, una tabella grande non può essere disegnata finché non è stata analizzata e misurata per intero. Confixedil rendering avviene riga per riga man mano che i dati arrivano, quindi una tabella lunga appare più velocemente e la pagina sembra caricarsi più rapidamente. - Prevedibilità. Le larghezze delle colonne rimangono esattamente dove le hai posizionate e non cambiano al variare del contenuto delle celle — utile per tabelle di dati con struttura nota.
Il compromesso: con fixed, un contenuto più largo della colonna non la espande. Per impostazione predefinita, tracima dalla cella. Di solito si abbina fixed a word-wrap / overflow-wrap, text-overflow o overflow per controllare cosa succede ai contenuti troppo grandi.
| Valore iniziale | auto |
|---|---|
| Si applica a | Elementi table e inline-table. |
| Ereditato | No. |
| Animabile | No. |
| Versione | CSS2 |
| Sintassi DOM | object.style.tableLayout = "fixed"; |
Sintassi
Sintassi CSS di table-layout
table-layout: auto | fixed | initial | inherit;Esempi
Esempio della proprietà table-layout con il valore "fixed":
Esempio di codice CSS table-layout
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
th,
td {
border: 2px solid #666;
}
table.t1 {
table-layout: fixed;
width: 40%;
}
</style>
</head>
<body>
<h2>Table-layout property example</h2>
<h3>Table-layout: fixed; width: 40%</h3>
<table class="t1">
<tr>
<th>Country</th>
<th>Capital</th>
<th>City</th>
</tr>
<tr>
<td>Russia</td>
<td>Moscow</td>
<td>Saint Petersburg</td>
</tr>
<tr>
<td>England</td>
<td>London</td>
<td>Manchester</td>
</tr>
<tr>
<td>The Netherlands</td>
<td>Amsterdam</td>
<td>The Hague</td>
</tr>
</table>
</body>
</html>Risultato
Esempio della proprietà table-layout con i valori "auto" e "fixed":
Esempio dei valori CSS table-layout
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
th,
td {
border: 2px solid #666;
}
table.t1 {
table-layout: fixed;
width: 250px;
}
table.t2 {
table-layout: auto;
width: 100%;
}
</style>
</head>
<body>
<h2>Table-layout property example</h2>
<h3>Table-layout: fixed; width: 250px</h3>
<table class="t1">
<tr>
<th>Country</th>
<th>Capital</th>
<th>City</th>
</tr>
<tr>
<td>Russia</td>
<td>Moscow</td>
<td>Saint Petersburg</td>
</tr>
<tr>
<td>England</td>
<td>London</td>
<td>Manchester</td>
</tr>
<tr>
<td>The Netherlands</td>
<td>Amsterdam</td>
<td>The Hague</td>
</tr>
</table>
<h3>Table-layout: auto; width: 100%</h3>
<table class="t2">
<tr>
<th>Country</th>
<th>Capital</th>
<th>City</th>
</tr>
<tr>
<td>Russia</td>
<td>Moscow</td>
<td>Saint Petersburg</td>
</tr>
<tr>
<td>England</td>
<td>London</td>
<td>Manchester</td>
</tr>
<tr>
<td>The Netherlands</td>
<td>Amsterdam</td>
<td>The Hague</td>
</tr>
</table>
</body>
</html>Con table-layout: fixed, la prima tabella mantiene le sue tre colonne di uguale larghezza (250px) indipendentemente dalla lunghezza dei nomi delle città, mentre la tabella auto si allarga per contenere "Saint Petersburg". Questa è la differenza fondamentale: fixed rispetta le larghezze impostate, auto rispetta il contenuto.
Gestire l'overflow con table-layout: fixed
Poiché le colonne con fixed non crescono per adattarsi ai contenuti lunghi, una parola più lunga della colonna fuoriesce dalla cella. La soluzione è mandare a capo o troncare il testo. Lo snippet seguente mostra tre approcci comuni a confronto:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
table-layout: fixed;
width: 300px;
border-collapse: collapse;
}
td {
border: 2px solid #666;
width: 100px;
padding: 4px;
}
.clip {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wrap {
overflow-wrap: break-word;
}
</style>
</head>
<body>
<table>
<tr>
<td>Overflows by default</td>
<td class="clip">Supercalifragilisticexpialidocious</td>
<td class="wrap">Supercalifragilisticexpialidocious</td>
</tr>
</table>
</body>
</html>La cella centrale tronca la parola lunga con un'ellissi (text-overflow: ellipsis), mentre la cella di destra la suddivide su più righe (overflow-wrap: break-word).
Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| auto | Utilizza un algoritmo di layout automatico quando la tabella e le sue celle si adattano al contenuto. Questo è il valore predefinito della proprietà. | Provalo » |
| fixed | Utilizza l'algoritmo di layout fisso per la tabella. La larghezza di tabella, col e la prima riga di celle determinano le larghezze della tabella e delle colonne. | Provalo » |
| initial | Imposta la proprietà al suo valore predefinito. | Provalo » |
| inherit | Eredita la proprietà dall'elemento padre. |
Proprietà correlate
table-layout funziona insieme alle altre proprietà CSS che definiscono lo stile delle tabelle:
border-collapse— scegli tra bordi delle celle separati e compressi.border-spacing— imposta lo spazio tra le celle quando i bordi sono separati.empty-cells— mostra o nascondi bordi e sfondi sulle celle prive di contenuto.width— imposta la larghezza complessiva della tabella su cui si basa l'algoritmofixed.white-space— controlla il ritorno a capo del testo nelle celle a larghezza fissa.