Disposizione dei tavoli - Trucchi CSS

La table-layoutproprietà definisce quale algoritmo deve utilizzare il browser per disporre le righe, le celle e le colonne della tabella.

table ( table-layout: fixed; )

Come spiegato nelle specifiche CSS2.1, il layout della tabella in generale è solitamente una questione di gusti e varierà a seconda delle scelte di progettazione. I browser, tuttavia, applicheranno automaticamente alcuni vincoli che definiranno la disposizione delle tabelle. Ciò accade quando la table-layoutproprietà è impostata su auto(impostazione predefinita). Ma questi vincoli possono essere rimossi quando table-layoutè impostato su fixed.

Valori

auto: il predefinito. L'algoritmo automatico del browser viene utilizzato per definire come sono disposte le righe, le celle e le colonne di una tabella. Il layout della tabella risultante dipende generalmente dal contenuto della tabella.
fixed: Con questo valore, il layout della tabella ignora il contenuto e utilizza invece la larghezza della tabella, qualsiasi larghezza di colonne specificata e valori di spaziatura tra le celle e il bordo. I valori delle colonne utilizzati si basano sulle larghezze definite sulle colonne o sulle celle per la prima riga della tabella.
inherit: indica che il valore è ereditato dal table-layoutvalore del suo genitore

Affinché un valore di fixedabbia effetto, la larghezza della tabella deve essere impostata su un valore diverso da auto(il valore predefinito per la widthproprietà). Nelle demo seguenti, tutte le larghezze della tabella sono impostate al 100%, il che presuppone che vogliamo che la tabella riempia il suo contenitore principale orizzontalmente.

Il modo migliore per vedere gli effetti di un algoritmo di layout di tabella fisso è utilizzare una demo.

Guarda la demo della penna per la proprietà di layout tabella CSS di Louis Lazaris (@impressivewebs) su CodePen.

Quando visualizzi per la prima volta la demo di cui sopra, noterai che il layout delle colonne della tabella è sbilanciato e scomodo. A quel punto, la tabella utilizza l'algoritmo predefinito del browser per definire come disporre la tabella, il che significa che il contenuto detterà il layout. La demo esagera questo fatto includendo una lunga stringa di testo all'interno di una cella di tabella, mentre tutte le altre celle di tabella utilizzano solo due parole ciascuna. Come puoi vedere, il browser espande la prima colonna per accogliere la parte più grande di contenuto.

Se fai clic sul pulsante "Attiva / disattiva layout tabella: fisso", vedrai come appare il layout della tabella quando viene utilizzato l'algoritmo "fisso". Quando table-layout: fixedviene applicato, il contenuto non determina più il layout, ma invece, il browser utilizza qualsiasi larghezza definita dalla prima riga della tabella per definire le larghezze delle colonne. Se non sono presenti larghezze nella prima riga, le larghezze delle colonne vengono divise equamente nella tabella, indipendentemente dal contenuto all'interno delle celle.

Ulteriori esempi possono aiutare a renderlo più chiaro. Nella demo seguente, la tabella ha un elemento il cui primo elemento ha una larghezza di 400px. Notare che in questo caso la commutazione table-layout: fixednon ha alcun effetto.

Guarda la demo della penna per la proprietà di layout tabella CSS di Louis Lazaris (@impressivewebs) su CodePen.

Ciò accade perché l'algoritmo di layout predefinito dice essenzialmente "allarga la prima colonna di 400 px e distribuisci le colonne rimanenti in base al loro contenuto". Poiché le altre tre colonne hanno lo stesso contenuto l'una dell'altra, non ci saranno modifiche. Ma ora aggiungiamo del contenuto di testo extra a una delle altre colonne:

Guarda la demo della penna per la proprietà di layout tabella di CSS con larghezza di colore e contenuto variabile di Louis Lazaris (@impressivewebs) su CodePen.

Ora se fai clic sul pulsante di attivazione / disattivazione, vedrai le colonne regolate per adattarsi a un layout fisso, indipendentemente dal contenuto. Ancora una volta, sta accadendo la stessa cosa; la prima colonna è impostata a 400px, quindi le colonne rimanenti vengono divise equamente. Ma questa volta, poiché una delle colonne ha contenuti extra, la differenza è evidente.

Come un algoritmo di layout fisso determina la larghezza delle colonne

Le seguenti due demo dovrebbero aiutare a capire che la prima riga della tabella è ciò che aiuta a definire le larghezze delle colonne di una tabella impostata su table-layout: fixed.

Guarda la demo della penna per il layout della tabella di CSS con la cella nella riga 1 data la larghezza definita da Louis Lazaris (@impressivewebs) su CodePen.

Nella demo sopra, la prima cella nella prima riga della tabella ha una larghezza di 350 px. La commutazione table-layout: fixedregola le altre colonne, ma la prima rimane la stessa. Ora prova la seguente demo:

Guarda la demo della penna per il layout della tabella di CSS con la cella nella riga 2 data la larghezza definita da Louis Lazaris (@impressivewebs) su CodePen.

In questo caso, è la seconda riga che ha una larghezza allegata alla sua prima cella di tabella. Ora, quando si fa clic sull'interruttore, tutte le larghezze delle colonne vengono regolate. Di nuovo, questo perché l'algoritmo di layout fisso utilizza la prima riga per determinare la larghezza delle colonne e il risultato finale è che distribuisce le larghezze in modo uguale.

Vantaggi di un algoritmo di layout fisso

I vantaggi estetici dell'utilizzo table-layout: fixeddovrebbero essere chiari dalle dimostrazioni precedenti. Ma l'altro grande vantaggio è la prestazione. La specifica si riferisce all'algoritmo fisso come un algoritmo "veloce" e per una buona ragione. Il browser non ha bisogno di analizzare l'intero contenuto della tabella prima di determinare la dimensione delle colonne; ha solo bisogno di analizzare la prima riga. Quindi il risultato è un'elaborazione più rapida del layout della tabella.