Corso di CSS / Tabelle CSS: bordi, dimensioni e table-layout

Il layout delle tabelle CSS distribuisce lo spazio delle colonne secondo le regole di dimensionamento della tabella e il contenuto. table-layout: auto considera il contenuto delle celle, mentre il layout fisso può rendere il dimensionamento delle colonne più prevedibile quando la tabella ha una larghezza esplicita.

Separare la larghezza della tabella e il padding delle celle

table { width: 100%; border-collapse: collapse; }

th, td { padding: 12px; border: 1px solid #aaa; text-align: start; }

width: 100% indica alla tabella di dimensionarsi in base alla larghezza del suo contenitore. Lo spazio all'interno della cella è impostato su padding e il bordo su border. border-collapse: collapse è un metodo per visualizzare i bordi delle celle adiacenti unendoli. Impostare la larghezza della tabella e inserire interruzioni di linea nel contenuto sono operazioni separate.

Una tabella con width: 100% non si adatta sempre al contenitore. Contenuti che non possono andar a capo o una larghezza minima elevata possono far sì che la tabella reale o il contenuto della cella risulti più largo. Nelle tabelle dati tipiche, è sicuro lasciare l'altezza delle celle crescere per adattarsi alla lunghezza della frase. Se si imposta un'altezza fissa, è necessario verificare il troncamento quando il testo aumenta di dimensione o si aggiunge contenuto.

Assegna le colonne in base al loro contenuto

<colgroup>
  <col style="width: 30%;">
  <col style="width: 70%;">
</colgroup>

L'esercizio suddivide il nome breve dell'articolo e la descrizione lunga in due colonne. Il rapporto 30:70 riserva più spazio alla descrizione. Se i dati effettivi consistono in date, prezzi, descrizioni lunghe, ecc., distribuiscili in base al ruolo di ciascuna colonna. Se il posizionamento automatico predefinito è sufficientemente leggibile, non è necessario forzare il rapporto.

Quando si specifica una percentuale dell'intera colonna, come mostrato qui, imposta la somma al 100%. Non considerare la dichiarazione della larghezza del colgroup come un risultato finale che deve essere applicato in ogni circostanza. Il layout automatico funziona insieme alla dimensione minima del contenuto e ai calcoli della tabella. Si prega di fare riferimento alla descrizione del colgroup in MDN.

Confronta layout automatico e layout fisso

Il layout della tabella fisso richiede una larghezza della tabella specificata; width: auto non produce il calcolo fisso previsto. Qui entrambe le tabelle usano width: 100% e lo stesso gruppo di colonne, differendo solo in table-layout. Se una cella taglia il testo, controlla separatamente le condizioni di a capo e di ellissi. Vedi MDN: layout della tabella, Overflow CSS, testo lungo a capo e puntini di sospensione.

I dati seguenti contengono codici di prenotazione lunghi che vogliamo visualizzare senza interruzioni di riga. L'esempio completo applica nowrap·hidden·ellipsis a questa cella in modo identico in entrambe le tabelle. Il layout automatico può essere ampliato per riflettere lo spazio dei valori lunghi, e il layout fisso può essere ridotto all'interno di una colonna specifica. Il testo originale è fornito per intero in un paragrafo separato, quindi puoi controllare anche il codice troncato.

Scorri la regione della tabella su schermi stretti

.table-scroll { overflow-x: auto; }

table { width: 100%; min-width: 32rem; }

Se la dimensione del font radice è 16px, allora 32rem corrispondono a 512px. Se la larghezza disponibile sullo schermo è inferiore a quella, la tabella manterrà la sua larghezza minima e solo l'area genitore scorrerà orizzontalmente. Questo deve essere distinto dallo scorrere l'intera pagina orizzontalmente. I 32rem nell'esercizio servono solo a scopo di confronto per queste due colonne e non sono intesi come larghezza minima per tutte le tabelle. Verifica che su uno schermo stretto le colonne restino raggiungibili, seguendo i controlli della lezione Verificare CSS responsive con larghezza, zoom e tastiera.

Se la tua tabella è piccola e ancora leggibile, puoi abbassare o rimuovere la larghezza minima. Al contrario, comprimere più colonne e valori lunghi può renderli difficili da leggere. Determina dai dati effettivi se le colonne semantiche possono essere abbreviate, risolte con interruzioni di riga o se è necessario un movimento orizzontale. Su mobile, istruzioni come “Puoi spostarti orizzontalmente” possono essere utili.

Il contenitore scorrevole ha tabindex="0", role="region", un nome descrittivo accessibile e un contorno del focus visibile. Premi Tab per entrare e usa i tasti freccia per raggiungere l’ultima colonna. Una tabella che non necessita di scorrimento non richiede automaticamente un ulteriore tab stop. Vedi MDN: overflow.

Esegui il confronto completo della tabella

Salva e apri il codice sottostante come UTF-8 in tables.html. Usa le stesse tre righe e la stessa proporzione di colonne 30:70, così puoi confrontare le differenze tra i layout. Il codice di prenotazione è un dato fittizio per la pratica del layout.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Table sizes and long content</title>
  <style>
    body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
    .table-scroll { max-width: 640px; overflow-x: auto; margin-block: 16px; }
    .table-scroll:focus-visible { outline: 3px solid #9b5d00; outline-offset: 3px; }
    table { width: 100%; min-width: 32rem; border-collapse: collapse; }
    th, td { padding: 12px; border: 1px solid #aaa; text-align: start; }
    .auto { table-layout: auto; }
    .fixed { table-layout: fixed; }
    .token { font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .original { max-width: 640px; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Automatic and fixed table layout</h1>
  <h2>table-layout: auto</h2>
  <div class="table-scroll" role="region" aria-label="Auto Batch Comparison Table" tabindex="0"><table class="auto"><colgroup><col style="width: 30%;"><col style="width: 70%;"></colgroup><thead><tr><th scope="col">item</th><th scope="col">explanation</th></tr></thead><tbody><tr><th scope="row">What to bring</th><td>Bring a water bottle and comfortable shoes.</td></tr><tr><th scope="row">reservation code</th><td class="token">GARDEN-VISIT-RESERVATION-2026-ABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr><tr><th scope="row">Visitor Information</th><td>Even if long information sentences span multiple lines, the cell height is increased to match the content.</td></tr></tbody></table></div>
  <h2>table-layout: fixed</h2>
  <div class="table-scroll" role="region" aria-label="Fixed batch comparison table" tabindex="0"><table class="fixed"><colgroup><col style="width: 30%;"><col style="width: 70%;"></colgroup><thead><tr><th scope="col">item</th><th scope="col">explanation</th></tr></thead><tbody><tr><th scope="row">What to bring</th><td>Bring a water bottle and comfortable shoes.</td></tr><tr><th scope="row">reservation code</th><td class="token">GARDEN-VISIT-RESERVATION-2026-ABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr><tr><th scope="row">Visitor Information</th><td>Even if long information sentences span multiple lines, the cell height is increased to match the content.</td></tr></tbody></table></div>
  <p class="original">Full reservation code: GARDEN-VISIT-RESERVATION-2026-ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
</body>
</html>

1. Restringi la finestra e controlla la larghezza di entrambe le tabelle. Le tabelle fisse sono almeno 512px con una base di 16px, e le tabelle automatiche possono essere più larghe per riflettere codici più lunghi. Entrambe le tabelle dovrebbero muoversi orizzontalmente nell'area in cui sono contenute, non attraverso la pagina.
2. Sposta il focus sull'area della tabella fissa usando Tab e controlla l'ultima colonna con il tasto freccia a destra. Su schermi piccoli, verifica anche se puoi muoverti orizzontalmente con il dito. Quando termini lo scorrimento, torna completamente a sinistra.
3. Nella regola .fixed cambia table-layout da fixed ad auto. Dopo aver verificato come cambiano la larghezza delle colonne e della tabella con gli stessi dati, ripristinalo su fixed.
4. Cambia white-space di .token in normal e aggiungi overflow-wrap: anywhere. Verifica se il codice lungo va a capo aumentando l'altezza della cella, poi torna alla dichiarazione originale.
5. Cambia il rapporto delle colonne a 40:60. Confronta lo spazio nella colonna delle voci brevi con i ritorni a capo nella colonna descrizione. Ripristinalo al 30:70 originale e controlla su uno schermo ampio e con testo ingrandito.

Se le proporzioni non sembrano come previsto, controlla il layout della tabella e la larghezza della tabella specificata, la larghezza minima e le condizioni di a capo per le stringhe lunghe. Se il movimento orizzontale non funziona, assicurati di specificare overflow-x sul contenitore esterno e non sulla tabella stessa. Se scegli di abbreviare le parole, dovresti essere in grado di leggere altrove il testo originale importante.