Documentazione è esempi per l'opt-in styling of tables (datu u so usu prevalenti in i plugins JavaScript) cù Bootstrap.
Esempii
A causa di l'usu generalizatu di e tavule in i widgets di terze parti cum'è i calendari è i selettori di data, avemu pensatu i nostri tavule per esse opt-in . Basta aghjunghje a classa di basa .tableà qualsiasi <table>, poi estende cù stili persunalizati o e nostre diverse classi di modificatori inclusi.
Utilizendu a marcatura di tavula più basica, eccu cumu .tablesi vede e tavule basate in Bootstrap. Tutti i stili di tavulinu sò ereditati in Bootstrap 4 , chì significheghja ogni tavule nidificatu serà stilatu in u listessu modu cum'è u genitore.
Aghjunghjite .table-borderedper e fruntiere in tutti i lati di a tavula è e cellule.
#
Primu
Ultimu
Maniglia
1
Marcu
Ottu
@mdo
2
Ghjacobbu
Thornton
@grassu
3
Larry l'uccello
@twitter
<tableclass="table table-bordered"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
#
Primu
Ultimu
Maniglia
1
Marcu
Ottu
@mdo
2
Ghjacobbu
Thornton
@grassu
3
Larry l'uccello
@twitter
<tableclass="table table-bordered table-dark"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
Tavola senza frontiere
Aghjunghjite .table-borderlessper una tavola senza cunfini.
#
Primu
Ultimu
Maniglia
1
Marcu
Ottu
@mdo
2
Ghjacobbu
Thornton
@grassu
3
Larry l'uccello
@twitter
<tableclass="table table-borderless"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
.table-borderlesspò ancu esse usatu nantu à tavule scure.
#
Primu
Ultimu
Maniglia
1
Marcu
Ottu
@mdo
2
Ghjacobbu
Thornton
@grassu
3
Larry l'uccello
@twitter
<tableclass="table table-borderless table-dark"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
Righe sferisce
Aghjunghjite .table-hoverper attivà un statu di hover nantu à e file di tavule in un <tbody>.
#
Primu
Ultimu
Maniglia
1
Marcu
Ottu
@mdo
2
Ghjacobbu
Thornton
@grassu
3
Larry l'uccello
@twitter
<tableclass="table table-hover"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
#
Primu
Ultimu
Maniglia
1
Marcu
Ottu
@mdo
2
Ghjacobbu
Thornton
@grassu
3
Larry l'uccello
@twitter
<tableclass="table table-hover table-dark"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
Piccola tavola
Aghjunghjite .table-smper fà i tavulini più compacti tagliendu l'imbottitura cellulare in a mità.
#
Primu
Ultimu
Maniglia
1
Marcu
Ottu
@mdo
2
Ghjacobbu
Thornton
@grassu
3
Larry l'uccello
@twitter
<tableclass="table table-sm"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
#
Primu
Ultimu
Maniglia
1
Marcu
Ottu
@mdo
2
Ghjacobbu
Thornton
@grassu
3
Larry l'uccello
@twitter
<tableclass="table table-sm table-dark"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
Classi contestuale
Aduprate classi contestuale per colorà e file di tavule o celle individuali.
Classe
Titulu
Titulu
Attivu
Cell
Cell
Default
Cell
Cell
Primariu
Cell
Cell
Sicundariu
Cell
Cell
Successu
Cell
Cell
Periculu
Cell
Cell
Attenti
Cell
Cell
Info
Cell
Cell
Luce
Cell
Cell
Scuru
Cell
Cell
<!-- On rows --><trclass="table-active">...</tr><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-active">...</td><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>
Varianti di fondu di tavulinu regulare ùn sò micca dispunibili cù a tavola scura, però, pudete aduprà testu o utilità di fondo per ottene stili simili.
#
Titulu
Titulu
1
Cell
Cell
2
Cell
Cell
3
Cell
Cell
4
Cell
Cell
5
Cell
Cell
6
Cell
Cell
7
Cell
Cell
8
Cell
Cell
9
Cell
Cell
<!-- On rows --><trclass="bg-primary">...</tr><trclass="bg-success">...</tr><trclass="bg-warning">...</tr><trclass="bg-danger">...</tr><trclass="bg-info">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="bg-primary">...</td><tdclass="bg-success">...</td><tdclass="bg-warning">...</td><tdclass="bg-danger">...</td><tdclass="bg-info">...</td></tr>
Trasmette u significatu à e tecnulugia assistive
Utilizà u culore per aghjunghje significatu solu furnisce una indicazione visuale, chì ùn serà micca trasmessa à l'utilizatori di tecnulugii assistivi - cum'è i lettori di schermu. Assicuratevi chì l'infurmazione denotata da u culore sia ovvia da u cuntenutu stessu (per esempiu, u testu visibile), o hè inclusa per mezu alternativu, cum'è testu addiziale oculatu cù a .sr-onlyclasse.
Crea tavule responsive avvolgendu qualsiasi .tablecù .table-responsive{-sm|-md|-lg|-xl}, facendu a tavola scorri orizzontalmente à ogni max-widthpuntu di rottura finu à (ma senza include) 576px, 768px, 992px, è 1120px, rispettivamente.
Da nutà chì, postu chì i navigatori ùn supportanu attualmente e
dumande di cuntestu di gamma , travagliemu intornu à e limitazioni
min-è i max-prefissi è i viewports cù larghezze fraccionari (chì ponu accade in certe cundizioni in i dispositi dpi high-dpi, per esempiu) utilizendu valori cù più precisione per questi paraguni. .
Captions
A <caption>funziona cum'è un capu per una tavola. Aiuta l'utilizatori cù lettori di schermu per truvà una tavola è capisce di ciò chì si tratta è decide s'ellu volenu leghje.
Lista di utilizatori
#
Primu
Ultimu
Maniglia
1
Marcu
Ottu
@mdo
2
Ghjacobbu
Thornton
@grassu
3
Larry
l'uccello
@twitter
<tableclass="table"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table>
Tavule rispunsevuli
I tavulini responsive permettenu à i tavulini di scorri orizzontalmente cun facilità. Fate chì ogni tavula risponda in tutti i vetri di vista avvolgendu un .tablecun .table-responsive. Oppure, sceglite un puntu di ruptura massimu cù quale avè una tavola responsiva finu à aduprà .table-responsive{-sm|-md|-lg|-xl}.
Tagliatura / troncatura verticale
I tavulini responsivi facenu usu di overflow-y: hidden, chì clips off qualsiasi cuntenutu chì va oltre i bordi inferiori o superiori di a tavola. In particulare, questu pò tagliate i menu drop-down è altri widgets di terzu.
Sempre responsive
In ogni puntu d'interruzione, aduprate .table-responsiveper i tavule di scorrimentu horizontale.
Aduprate .table-responsive{-sm|-md|-lg|-xl}cum'è necessariu per creà tavule rispunsevuli finu à un puntu di rupture particulare. Da quellu puntu di rottura è sopra, a tavula si cumportarà nurmale è ùn scorri micca orizzontalmente.
Queste tavule ponu apparissi rotte finu à chì i so stili rispunsevuli s'applicanu à larghezze di vista specifiche.