HTML.it - Reference Bootstrap

Guida Boostrap 3 - Reference

Indice dei contenuti

Tabelle: impostazioni di base

Bootstrap prevede una serie di regole stilistiche per la formattazione delle tabelle. Per applicare questi stili si aggiunge la classe .table al tag <table>.

Il markup HTML di base da usare è questo:

<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nome</th>
      <th>Cognome</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Marco</td>
      <td>Rossi</td>
      <td>marcoR</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Paolo</td>
      <td>Bianchi</td>
      <td>paoloB</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Sandro</td>
      <td>Verdi</td>
      <td>sandroV</td>
    </tr>
  </tbody>
</table>

Il risultato è questo:

ID Nome Cognome Username
1 Marco Rossi marcoR
2 Paolo Bianchi paoloB
3 Sandro Verdi sandroV

Le tabelle di Bootstrap hanno di default una larghezza massima (max-width) e una larghezza (width) del 100%. Per modificare queste impostazioni si può intervenire su queste regole:

table {
  max-width: 100%;
  background-color: transparent;
}

.table {
  width: 100%;
  margin-bottom: 20px;
}

A livello tipografico e per il colore di sfondo vengono ereditate le impostazioni globali. Il testo della testata della tabella (thead e <th>) è in grassetto e allineato a sinistra.

th {
  text-align: left;
}

Nella configurazione di base, viene assegnato un bordo superiore alle celle. Il colore e lo spessore del bordo, oltre al padding per le celle, può essere modificato a partire da questa regola:

.table thead > tr > th,
.table tbody > tr > th,
.table tfoot > tr > th,
.table thead > tr > td,
.table tbody > tr > td,
.table tfoot > tr > td {
  padding: 8px;
  line-height: 1.428571429;
  vertical-align: top;
  border-top: 1px solid #dddddd;
}

Tabelle con righe a colori alternati

A partire dalla configurazione di base, possiamo modificare l'aspetto della tabella con l'aggiunta di ulteriori classi nel markup HTML, sempre a livello del tag <table>.

La classe .table-striped consente di ottenere una tabella con righe a colori alternati.

<table class="table table-striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nome</th>
      <th>Cognome</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Marco</td>
      <td>Rossi</td>
      <td>marcoR</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Paolo</td>
      <td>Bianchi</td>
      <td>paoloB</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Sandro</td>
      <td>Verdi</td>
      <td>sandroV</td>
    </tr>
  </tbody>
</table>
ID Nome Cognome Username
1 Marco Rossi marcoR
2 Paolo Bianchi paoloB
3 Sandro Verdi sandroV

Si può personalizzare il colore delle righe dispari (di default è un grigio chiaro) agendo su questa regola:

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}

Tabelle con bordi intorno alle celle

Per ottenere una tabella con bordi che racchiudono le celle su tutti i lati, si aggiunge la classe .table-bordered.

<table class="table table-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nome</th>
      <th>Cognome</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Marco</td>
      <td>Rossi</td>
      <td>marcoR</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Paolo</td>
      <td>Bianchi</td>
      <td>paoloB</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Sandro</td>
      <td>Verdi</td>
      <td>sandroV</td>
    </tr>
  </tbody>
</table>
ID Nome Cognome Username
1 Marco Rossi marcoR
2 Paolo Bianchi paoloB
3 Sandro Verdi sandroV

Anche in questo caso possiamo modificare la configurazione di default, per personalizzare il bordo. Ecco le regole CSS da tenere in considerazione:

.table-bordered {
  border: 1px solid #dddddd;
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #dddddd;
}

Tabelle con righe evidenziate sull'hover

La classe .table-hover consente di evidenziare le righe della tabella quando si passa sopra di esse con il mouse.

<table class="table table-hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nome</th>
      <th>Cognome</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Marco</td>
      <td>Rossi</td>
      <td>marcoR</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Paolo</td>
      <td>Bianchi</td>
      <td>paoloB</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Sandro</td>
      <td>Verdi</td>
      <td>sandroV</td>
    </tr>
  </tbody>
</table>
ID Nome Cognome Username
1 Marco Rossi marcoR
2 Paolo Bianchi paoloB
3 Sandro Verdi sandroV

Il colore di sfondo dell'hover può essere impostato a piacere modificando questa regola:

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: #f5f5f5;
}

Tabelle compattate

L'ultima classe prevista in Bootstrap per le tabelle è .table-condensed. Consente di ottenere tabelle più compattate, con meno padding sulle celle e sulle righe.

<table class="table table-condensed">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nome</th>
      <th>Cognome</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Marco</td>
      <td>Rossi</td>
      <td>marcoR</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Paolo</td>
      <td>Bianchi</td>
      <td>paoloB</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Sandro</td>
      <td>Verdi</td>
      <td>sandroV</td>
    </tr>
  </tbody>
</table>
ID Nome Cognome Username
1 Marco Rossi marcoR
2 Paolo Bianchi paoloB
3 Sandro Verdi sandroV

Tabelle responsive

Per adattare una tabella a schermi inferiori in larghezza a 768px, la si racchiude in un div con la classe .table-responsive. La tabella viene adattata rendendola scrollabile in senso orizzontale.

<div class="table-responsive">
<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nome</th>
      <th>Cognome</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Marco</td>
      <td>Rossi</td>
      <td>marcoR</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Paolo</td>
      <td>Bianchi</td>
      <td>paoloB</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Sandro</td>
      <td>Verdi</td>
      <td>sandroV</td>
    </tr>
  </tbody>
</table>
</div>

Il risultato è questo:

ID Nome Cognome Username ID Nome Cognome Username
1 Marco Rossi marcoR 1 Marco Rossi marcoR
2 Paolo Bianchi paoloB 1 Marco Rossi marcoR
3 Sandro Verdi sandroV 1 Marco Rossi marcoR