Vai al contenuto principale

Bootstrap Italia

Interfacce Web Accessibili per la PA

Tabelle

Tabelle

Documentazione ed esempi per lo stile delle tabelle.

Esempi

A causa dell’uso diffuso di tabelle su widget di terze parti come calendari e campi di selezione data, Bootstrap ha progettato le tabelle senza forzarne lo stile. È sufficiente aggiungere la classe .table a qualsiasi <table>, quindi estendere con stili personalizzati o con le nostre varie classi incluse di modificatori.

Usando il markup di base della tabella, ecco come appaiono le tabelle che utilizzano la classe .table in Bootstrap.
Gli stili di tabella non sono ereditari, il che significa che le tabelle annidate possono avere uno stile diverso da quello della tabella genitrice.

# Nome Cognome Username
1 Mario Verdi mario.verdi
2 Francesco Bianchi francesco.bianchi
3 Alessandro Rossi alessandro.rossi 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nome</th>
      <th scope="col">Cognome</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mario</td>
      <td>Verdi</td>
      <td>mario.verdi</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Francesco</td>
      <td>Bianchi</td>
      <td>francesco.bianchi</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Alessandro</td>
      <td>Rossi</td>
      <td>alessandro.rossi</td>
    </tr>
  </tbody>
</table>

Tabelle responsive

Le tabelle responsive consentono di scorrere le tabelle orizzontalmente con facilità. Rendi ogni tabella responsive su tutti i viewports racchiudendo un .table con .table-responsive. Oppure, scegli un breakpoint massimo con il quale ottenere una tabella responsive usando .table-responsive{-sm|-md|-lg|-xl|-xxl}, rispettivamente con max-width di 576px, 768px, 992px, 1200px, 1400px.

Ritaglio / troncamento verticale

Le tabelle responsive fanno uso di overflow-y: hidden, che rimuove qualsiasi contenuto che va oltre i bordi inferiore o superiore della tabella. In particolare, questo può ritagliare i menu a discesa e altri widget di terze parti.

Sempre responsive

Attraverso ogni breakpoint, usa .table-responsive per tabelle con scorrimento verticale.

# Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione
1 Cella Cella Cella Cella Cella Cella Cella Cella Cella
2 Cella Cella Cella Cella Cella Cella Cella Cella Cella
3 Cella Cella Cella Cella Cella Cella Cella Cella Cella 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
        </tr>
      </tbody>
    </table>
  </div>

Breakpoint specifici

Usa .table-responsive{-sm|-md|-lg|-xl|-xxl} come necessario per creare tabelle responsive fino a un punto di interruzione particolare. Da quel punto di interruzione in su, la tabella si comporterà normalmente e non scorrerà orizzontalmente.

# Intestazione Intestazione Intestazione Intestazione Intestazione
1 Cella Cella Cella Cella Cella
2 Cella Cella Cella Cella Cella
3 Cella Cella Cella Cella Cella
# Intestazione Intestazione Intestazione Intestazione Intestazione
1 Cella Cella Cella Cella Cella
2 Cella Cella Cella Cella Cella
3 Cella Cella Cella Cella Cella
# Intestazione Intestazione Intestazione Intestazione Intestazione
1 Cella Cella Cella Cella Cella
2 Cella Cella Cella Cella Cella
3 Cella Cella Cella Cella Cella
# Intestazione Intestazione Intestazione Intestazione Intestazione
1 Cella Cella Cella Cella Cella
2 Cella Cella Cella Cella Cella
3 Cella Cella Cella Cella Cella
# Intestazione Intestazione Intestazione Intestazione Intestazione
1 Cella Cella Cella Cella Cella
2 Cella Cella Cella Cella Cella
3 Cella Cella Cella Cella Cella 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208

  <div class="table-responsive-sm">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
        </tr>
      </tbody>
    </table>
  </div>


  <div class="table-responsive-md">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
        </tr>
      </tbody>
    </table>
  </div>


  <div class="table-responsive-lg">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
        </tr>
      </tbody>
    </table>
  </div>


  <div class="table-responsive-xl">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
        </tr>
      </tbody>
    </table>
  </div>


  <div class="table-responsive-xxl">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
          <th scope="col">Intestazione</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
          <td>Cella</td>
        </tr>
      </tbody>
    </table>
  </div>

Varianti

Utilizza le classi contestuali per colorare tabelle, righe o celle individuali.

Tabelle colorate

Primary Cella Cella
Secondary Cella Cella
Success Cella Cella
Danger Cella Cella
Warning Cella Cella
Info Cella Cella
Light Cella Cella
Dark Cella Cella 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

  <table class="table table-primary">
    <tbody>
      <tr>
        <th scope="row">Primary</th>
        <td>Cella</td>
        <td>Cella</td>
      </tr>
    </tbody>
  </table>

  <table class="table table-secondary">
    <tbody>
      <tr>
        <th scope="row">Secondary</th>
        <td>Cella</td>
        <td>Cella</td>
      </tr>
    </tbody>
  </table>

  <table class="table table-success">
    <tbody>
      <tr>
        <th scope="row">Success</th>
        <td>Cella</td>
        <td>Cella</td>
      </tr>
    </tbody>
  </table>
  
  <table class="table table-danger">
    <tbody>
      <tr>
        <th scope="row">Danger</th>
        <td>Cella</td>
        <td>Cella</td>
      </tr>
    </tbody>
  </table>

  <table class="table table-warning">
    <tbody>
      <tr>
        <th scope="row">Warning</th>
        <td>Cella</td>
        <td>Cella</td>
      </tr>
    </tbody>
  </table>

  <table class="table table-info">
    <tbody>
      <tr>
        <th scope="row">Info</th>
        <td>Cella</td>
        <td>Cella</td>
      </tr>
    </tbody>
  </table>

  <table class="table table-light">
    <tbody>
      <tr>
        <th scope="row">Light</th>
        <td>Cella</td>
        <td>Cella</td>
      </tr>
    </tbody>
  </table>

  <table class="table table-dark">
    <tbody>
      <tr>
        <th scope="row">Dark</th>
        <td>Cella</td>
        <td>Cella</td>
      </tr>
    </tbody>
  </table>

Righe colorate

Classe Intestazione Intestazione
Default Cella Cella
Primary Cella Cella
Secondary Cella Cella
Success Cella Cella
Danger Cella Cella
Warning Cella Cella
Info Cella Cella
Light Cella Cella
Dark Cella Cella 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

  <table class="table">
    <thead>
      <tr>
        <th scope="col">Classe</th>
        <th scope="col">Intestazione</th>
        <th scope="col">Intestazione</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Default</th>
        <td>Cella</td>
        <td>Cella</td>
      </tr>
      <tr class="table-primary">
        <th scope="row">Primary</th>
        <td>Cella</td>
        <td>Cella</td>
      </tr>
      <tr class="table-secondary">
        <th scope="row">Secondary</th>
        <td>Cella</td>
        <td>Cella</td>
      </tr>
      <tr class="table-success">
        <th scope="row">Success</th>
        <td>Cella</td>
        <td>Cella</td>
      </tr>
      <tr class="table-danger">
        <th scope="row">Danger</th>
        <td>Cella</td>
        <td>Cella</td>
      </tr>
      <tr class="table-warning">
        <th scope="row">Warning</th>
        <td>Cella</td>
        <td>Cella</td>
      </tr>
      <tr class="table-info">
        <th scope="row">Info</th>
        <td>Cella</td>
        <td>Cella</td>
      </tr>
      <tr class="table-light">
        <th scope="row">Light</th>
        <td>Cella</td>
        <td>Cella</td>
      </tr>
      <tr class="table-dark">
        <th scope="row">Dark</th>
        <td>Cella</td>
        <td>Cella</td>
      </tr>
    </tbody>
  </table>

Celle colorate

Primary Secondary Success Danger Warning Info Light Dark 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

  <div class="table-responsive">
    <table class="table">
      <tbody>
        <tr>
          <td class="table-primary">Primary</td>
          <td class="table-secondary">Secondary</td>
          <td class="table-success">Success</td>
          <td class="table-danger">Danger</td>
          <td class="table-warning">Warning</td>
          <td class="table-info">Info</td>
          <td class="table-light">Light</td>
          <td class="table-dark">Dark</td>
        </tr>
      </tbody>
    </table>
  </div>

Trasmettere significato alle tecnologie assistive

L’uso del colore per aggiungere un significato fornisce solo un’indicazione visiva, che non sarà trasmesso agli utenti di tecnologie assistive – come gli screen reader. Assicurati che le informazioni denotate dal colore siano rese disponibili anche dal contenuto stesso (es.: il testo visibile), o siano incluse attraverso mezzi alternativi, come testo aggiuntivo nascosto con la classe .visually-hidden.

Righe striate

Usa .table-striped per aggiungere delle striature zebrate ad ogni riga della tabella contenute in <tbody>.

# Nome Cognome Username
1 Mario Verdi mario.verdi
2 Francesco Bianchi francesco.bianchi
3 Alessandro Rossi alessandro.rossi 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

  <table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Nome</th>
        <th scope="col">Cognome</th>
        <th scope="col">Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mario</td>
        <td>Verdi</td>
        <td>mario.verdi</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Francesco</td>
        <td>Bianchi</td>
        <td>francesco.bianchi</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Alessandro</td>
        <td>Rossi</td>
        <td>alessandro.rossi</td>
      </tr>
    </tbody>
  </table>

Queste classi sono applicabili anche alle varianti:

# Nome Cognome Username
1 Mario Verdi mario.verdi
2 Francesco Bianchi francesco.bianchi
3 Alessandro Rossi alessandro.rossi 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

  <table class="table table-dark table-striped">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Nome</th>
        <th scope="col">Cognome</th>
        <th scope="col">Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mario</td>
        <td>Verdi</td>
        <td>mario.verdi</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Francesco</td>
        <td>Bianchi</td>
        <td>francesco.bianchi</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Alessandro</td>
        <td>Rossi</td>
        <td>alessandro.rossi</td>
      </tr>
    </tbody>
  </table>

Righe e hover

Aggiungi .table-hover per abilitare lo stato hover sulle righe della tabella contenute in <tbody>.

# Nome Cognome Username
1 Mario Verdi mario.verdi
2 Francesco Bianchi francesco.bianchi
3 Alessandro Rossi alessandro.rossi 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

  <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Nome</th>
        <th scope="col">Cognome</th>
        <th scope="col">Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mario</td>
        <td>Verdi</td>
        <td>mario.verdi</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Francesco</td>
        <td>Bianchi</td>
        <td>francesco.bianchi</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Alessandro</td>
        <td>Rossi</td>
        <td>alessandro.rossi</td>
      </tr>
    </tbody>
  </table>

Le tabelle con hover possono essere combinate con la variante striata.

# Nome Cognome Username
1 Mario Verdi mario.verdi
2 Francesco Bianchi francesco.bianchi
3 Alessandro Rossi alessandro.rossi 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Nome</th>
        <th scope="col">Cognome</th>
        <th scope="col">Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mario</td>
        <td>Verdi</td>
        <td>mario.verdi</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Francesco</td>
        <td>Bianchi</td>
        <td>francesco.bianchi</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Alessandro</td>
        <td>Rossi</td>
        <td>alessandro.rossi</td>
      </tr>
    </tbody>
  </table>

Tabelle attive

Le tabelle attive mettono in evidenza una cella o un’intera riga. Aggiungi .table-active a una riga <tr> o a una cella <td> per evidenziare quella riga o cella specifica.

# Nome Cognome Username
1 Alessandro Rossi alessandro.rossi
2 Francesco Bianchi francesco.bianchi
3 Mario Verdi @twitter 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nome</th>
      <th scope="col">Cognome</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-active">
      <th scope="row">1</th>
      <td>Alessandro</td>
      <td>Rossi</td>
      <td>alessandro.rossi</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Francesco</td>
      <td>Bianchi</td>
      <td>francesco.bianchi</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Mario</td>
      <td>Verdi</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Tabella con bordi

Aggiungi .table-bordered per avere i bordi a tutti i lati della tabella e su tutte le celle.

# Nome Cognome Username
1 Alessandro Rossi alessandro.rossi
2 Francesco Bianchi francesco.bianchi
3 Mario Verdi @twitter 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

  <table class="table table-bordered">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Nome</th>
          <th scope="col">Cognome</th>
          <th scope="col">Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Alessandro</td>
          <td>Rossi</td>
          <td>alessandro.rossi</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Francesco</td>
          <td>Bianchi</td>
          <td>francesco.bianchi</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Mario</td>
          <td>Verdi</td>
          <td>@twitter</td>
        </tr>
      </tbody>
  </table>

Le utilities di colorazione dei bordi possono essere utilizzate per cambiarne i colori.

# Nome Cognome Username
1 Alessandro Rossi alessandro.rossi
2 Francesco Bianchi francesco.bianchi
3 Mario Verdi @twitter 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

  <table class="table table-bordered border-primary">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Nome</th>
          <th scope="col">Cognome</th>
          <th scope="col">Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Alessandro</td>
          <td>Rossi</td>
          <td>alessandro.rossi</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Francesco</td>
          <td>Bianchi</td>
          <td>francesco.bianchi</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Mario</td>
          <td>Verdi</td>
          <td>@twitter</td>
        </tr>
      </tbody>
  </table>

Tabella senza bordi

Aggiungi la classe .table-borderless per una tabella senza bordi.

# Nome Cognome Username
1 Alessandro Rossi alessandro.rossi
2 Francesco Bianchi francesco.bianchi
3 Mario Verdi @twitter 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

  <table class="table table-borderless">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Nome</th>
          <th scope="col">Cognome</th>
          <th scope="col">Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Alessandro</td>
          <td>Rossi</td>
          <td>alessandro.rossi</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Francesco</td>
          <td>Bianchi</td>
          <td>francesco.bianchi</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Mario</td>
          <td>Verdi</td>
          <td>@twitter</td>
        </tr>
      </tbody>
  </table>
# Nome Cognome Username
1 Alessandro Rossi alessandro.rossi
2 Francesco Bianchi francesco.bianchi
3 Mario Verdi @twitter 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

  <table class="table table-dark table-borderless">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Nome</th>
          <th scope="col">Cognome</th>
          <th scope="col">Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Alessandro</td>
          <td>Rossi</td>
          <td>alessandro.rossi</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Francesco</td>
          <td>Bianchi</td>
          <td>francesco.bianchi</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Mario</td>
          <td>Verdi</td>
          <td>@twitter</td>
        </tr>
      </tbody>
  </table>

Tabella compatta

Aggiungi .table-sm per rendere le tabelle più compatte dimezzando il cell padding.

# Nome Cognome Username
1 Alessandro Rossi alessandro.rossi
2 Francesco Bianchi francesco.bianchi
3 Mario Verdi @twitter 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

  <table class="table table-sm">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Nome</th>
          <th scope="col">Cognome</th>
          <th scope="col">Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Alessandro</td>
          <td>Rossi</td>
          <td>alessandro.rossi</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Francesco</td>
          <td>Bianchi</td>
          <td>francesco.bianchi</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Mario</td>
          <td>Verdi</td>
          <td>@twitter</td>
        </tr>
      </tbody>
  </table>

Allineamento verticale

Le celle contenute nel <thead> sono sempre allineate verticalmente al bottom. Le celle del <tbody> ereditano l’allineamento da <table> e sono allineate al top per default. Utilizza le classi di allineamento verticale per riallineare dove necessario.

Intestazione 1 Intestazione 2 Intestazione 3 Intestazione 4
Questa cella eredita vertical-align: middle; dalla tabella Questa cella eredita vertical-align: middle; dalla tabella Questa cella eredita vertical-align: middle; dalla tabella This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
Questa cella eredita vertical-align: bottom;dalla riga Questa cella eredita vertical-align: bottom;dalla riga Questa cella eredita vertical-align: bottom;dalla riga This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
Questa cella eredita vertical-align: top; dalla tabella Questa cella eredita vertical-align: top; dalla tabella Questa cella eredita vertical-align: top; dalla tabella This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

  <div class="table-responsive">
    <table class="table align-middle">
      <thead>
        <tr>
          <th scope="col" class="w-25">Intestazione 1</th>
          <th scope="col" class="w-25">Intestazione 2</th>
          <th scope="col" class="w-25">Intestazione 3</th>
          <th scope="col" class="w-25">Intestazione 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Questa cella eredita <code>vertical-align: middle;</code> dalla tabella</td>
          <td>Questa cella eredita <code>vertical-align: middle;</code> dalla tabella</td>
          <td>Questa cella eredita <code>vertical-align: middle;</code> dalla tabella</td>
          <td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td>
        </tr>
        <tr class="align-bottom">
          <td>Questa cella eredita <code>vertical-align: bottom;</code>dalla riga</td>
          <td>Questa cella eredita <code>vertical-align: bottom;</code>dalla riga</td>
          <td>Questa cella eredita <code>vertical-align: bottom;</code>dalla riga</td>
          <td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td>
        </tr>
        <tr class="align-top">
          <td>Questa cella eredita <code>vertical-align: top;</code> dalla tabella</td>
          <td>Questa cella eredita <code>vertical-align: top;</code> dalla tabella</td>
          <td>Questa cella eredita <code>vertical-align: top;</code> dalla tabella</td>
          <td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td>
        </tr>
      </tbody>
    </table>
  </div>

Annidamento

Gli stili di bordi, gli stili attivi e le varianti non sono ereditati dalle tabelle annidate.

# Nome Cognome Username
1 Alessandro Rossi alessandro.rossi
Header Header Header
A Dato A Dato B
B Dato C Dato D
C Dato E Dato F
3 Mario Verdi @twitter 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

  <table class="table table-striped table-bordered">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Nome</th>
        <th scope="col">Cognome</th>
        <th scope="col">Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Alessandro</td>
        <td>Rossi</td>
        <td>alessandro.rossi</td>
      </tr>
      <tr>
        <td colspan="4">
          <table class="table mb-0">
            <thead>
              <tr>
                <th scope="col">Header</th>
                <th scope="col">Header</th>
                <th scope="col">Header</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">A</th>
                <td>Dato A</td>
                <td>Dato B</td>
              </tr>
              <tr>
                <th scope="row">B</th>
                <td>Dato C</td>
                <td>Dato D</td>
              </tr>
              <tr>
                <th scope="row">C</th>
                <td>Dato E</td>
                <td>Dato F</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Mario</td>
        <td>Verdi</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>

Struttura

Intestazione

Come per le tabelle utilizza le classi varianti come .table-light o .table-dark per modificare l’aspetto di <thead>.

# Nome Cognome Username
1 Mario Verdi mario.verdi
2 Francesco Bianchi francesco.bianchi
3 Alessandro Rossi alessandro.rossi 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

  <table class="table">
    <thead class="table-dark">
      <tr>
        <th scope="col">#</th>
        <th scope="col">Nome</th>
        <th scope="col">Cognome</th>
        <th scope="col">Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mario</td>
        <td>Verdi</td>
        <td>mario.verdi</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Francesco</td>
        <td>Bianchi</td>
        <td>	francesco.bianchi</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Alessandro</td>
        <td>Rossi</td>
        <td>alessandro.rossi</td>
      </tr>
    </tbody>
  </table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Footer Footer Footer Footer 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

  <table class="table">
    <thead class="table-light">
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Footer</td>
        <td>Footer</td>
        <td>Footer</td>
        <td>Footer</td>
      </tr>
    </tfoot>
  </table>

Caption

Un <caption> funziona come un’intestazione per una tabella. Aiuta gli utenti con screen reader a trovare una tabella e capire di cosa si tratta e decidere se vogliono leggerla.

Lista degli utenti
# Nome Cognome Username
1 Mario Verdi mario.verdi
2 Francesco Bianchi francesco.bianchi
3 Alessandro Rossi @twitter 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

  <table class="table table-sm">
    <caption>Lista degli utenti</caption>
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Nome</th>
        <th scope="col">Cognome</th>
        <th scope="col">Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mario</td>
        <td>Verdi</td>
        <td>mario.verdi</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Francesco</td>
        <td>Bianchi</td>
        <td>francesco.bianchi</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td colspan="2">Alessandro Rossi</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>

Per renderizzare la <caption> in cima alla tabella utilizza la classe .caption-top.

Lista degli utenti
# Nome Cognome Username
1 Mario Verdi mario.verdi
2 Francesco Bianchi francesco.bianchi
3 Alessandro Rossi @twitter 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

  <table class="table sm caption-top">
    <caption>Lista degli utenti</caption>
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Nome</th>
        <th scope="col">Cognome</th>
        <th scope="col">Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mario</td>
        <td>Verdi</td>
        <td>mario.verdi</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Francesco</td>
        <td>Bianchi</td>
        <td>francesco.bianchi</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td colspan="2">Alessandro Rossi</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>

Properties

La descrizione delle custom properties è in inglese perché risiede nei files .scss dei componenti.

Variabile CSS Descrizione (Inglese) Predefinito
--bsi-table-color Controls the text color for the table, using color tokens. var(--bsi-color-text-base)
--bsi-table-bg Controls the background color for the table, using color tokens. transparent
--bsi-table-border-color Controls the border color for the table, using color tokens. var(--bsi-border-color)
--bsi-table-border-width Controls the border width for the table cell. var(--bsi-border-width)
--bsi-table-striped-bg Controls the text color for the striped rows, using color tokens. var(--bsi-color-background-muted)
--bsi-table-active-bg Controls the background color for the active rows, using color tokens. var(--bsi-color-background-secondary)
--bsi-table-hover-color Controls the text color for the hovered rows, using color tokens. var(--bsi-color-text-base)
--bsi-table-hover-bg Controls the background color for the hovered rows, using color tokens. var(--bsi-color-background-secondary-hover)
--bsi-table-padding Controls the padding for the table cells, using spacing tokens. var(--bsi-spacing-xxs)
--bsi-table-cell-font-size Controls the font size for the table cells, using typography tokens. var(--bsi-body-font-size)
--bsi-table-cell-vertical-align Controls the vertical alignment of the table cells. top