CSS: un modo semplice per impostare la larghezza delle colonne di una tabella

Ecco un modo molto semplice per dimensionare le colonne della tua tabella con poche righe di CSS, invece di assegnare valori inline a ogni cella. Questo metodo rende molto più facile creare tabelle responsive.

Demo: ecco come appare

CSS

Copia il codice qui sotto e incollalo nel tuo file CSS.

table tr td { padding: 20px; }
table td:nth-child(1) { width: 35%; }
table td:nth-child(2) { width: 15%; }
table td:nth-child(3) { width: 5%; }
table td:nth-child(4) { width: 35%; }
table td:nth-child(5) { width: 10%; }

HTML

Copia il codice qui sotto e incollalo nel tuo documento HTML.

<table class="table" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>35%</td>
    <td>15%</td>
    <td>5%</td>
    <td>35%</td>
    <td>10%</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
</table>

Puoi copiare sia il CSS sia l’HTML nel tuo file e modificarli come preferisci!

Nota: questi selettori riguardano tutte le tabelle della pagina. Per limitarli a una sola tabella, aggiungi una classe davanti a ogni selettore, ad esempio .my-table td:nth-child(1). Inoltre padding e contenuto stabiliscono una larghezza minima, quindi le colonne molto strette (come quella del 5%) possono risultare più larghe del previsto.