CSS table-layout
La proprietà CSS3 table-layout controlla il calcolo della larghezza delle tabelle
La proprietà table-layout consente di definire il comportamento del layout delle colonne in una tabella HTML. Con fixed, il browser calcola la larghezza delle colonne solo in base alla prima riga, migliorando la velocità di rendering e la prevedibilità dell’impaginazione.
Sintassi
Significato dei valori principali:
auto: (Valore predefinito) La larghezza delle colonne è determinata in base al contenuto delle celle. Il layout può cambiare dinamicamente.
fixed: Le colonne hanno larghezza fissa. La prima riga viene usata per calcolare le larghezze. Più veloce da renderizzare e più prevedibile.
inherit: Eredita il valore dal contenitore padre.
Esempio proprietà: table-layout
Codice Esempio: table-layout
.table-auto, .table-fixed {
border-collapse: collapse;
width: 300px;
table-layout: auto;
}.table-fixed {
table-layout: fixed;
}.table-auto td, .table-fixed td {
border: 1px solid #333;
padding: 10px;
word-wrap: break-word;
}.wide-text {
white-space: nowrap;
}caption {
font-weight: bold;
margin-bottom: 10px;
}
Contenuto Esempio: table-layout
Esempio di utilizzo della proprietà table-layout
Nel seguente esempio sono mostrate due tabelle, una con table-layout: auto e l’altra con table-layout: fixed. Il comportamento del layout delle colonne è visibilmente diverso:
| Colonna 1 | Contenuto molto lungo senza spazi |
| Dati | Altro contenuto |
| Colonna 1 | Contenuto molto lungo senza spazi |
| Dati | Altro contenuto |
HTML e CSS completo per l'esempio:
<style>
.table-auto, .table-fixed {
border-collapse: collapse;
width: 300px;
table-layout: auto;
}
.table-fixed {
table-layout: fixed;
}
.table-auto td, .table-fixed td {
border: 1px solid #333;
padding: 10px;
word-wrap: break-word;
}
.wide-text {
white-space: nowrap;
}
caption {
font-weight: bold;
margin-bottom: 10px;
}
</style>
<table class="table-auto">
<caption>table-layout: auto</caption>
<tr>
<td>Colonna 1</td>
<td class="wide-text">Contenuto molto lungo senza spazi</td>
</tr>
<tr>
<td>Dati</td>
<td>Altro contenuto</td>
</tr>
</table>
<table class="table-fixed">
<caption>table-layout: fixed</caption>
<tr>
<td>Colonna 1</td>
<td class="wide-text">Contenuto molto lungo senza spazi</td>
</tr>
<tr>
<td>Dati</td>
<td>Altro contenuto</td>
</tr>
</table>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.214
