Classi per l'elemento table
.table
.table-striped
.table-bordered
.table-hover
.table-condensed
.table-responsive
Stili per righe tr e celle td
.active
.success
.info
.warning
.danger
.table
| # | Nome | Via | Lavoro |
|---|---|---|---|
| 1 | Mario | Roma | Abbigliamento |
| 2 | Luigi | Garibaldi | Ristorazione |
| 3 | Antonio | Mazzini | Informatica |
.table-striped
| # | Nome | Via | Lavoro |
|---|---|---|---|
| 1 | Mario | Roma | Abbigliamento |
| 2 | Luigi | Garibaldi | Ristorazione |
| 3 | Antonio | Mazzini | Informatica |
.table-bordered
| # | Nome | Via | Lavoro |
|---|---|---|---|
| 1 | Mario | Roma | Abbigliamento |
| 2 | Luigi | Garibaldi | Ristorazione |
| 3 | Antonio | Mazzini | Informatica |
Le righe sono sensibili al passaggio del mouse
.table-hover
| # | Nome | Via | Lavoro |
|---|---|---|---|
| 1 | Mario | Roma | Abbigliamento |
| 2 | Luigi | Garibaldi | Ristorazione |
| 3 | Antonio | Mazzini | Informatica |
.table-condensed
| # | Nome | Via | Lavoro |
|---|---|---|---|
| 1 | Mario | Roma | Abbigliamento |
| 2 | Luigi | Garibaldi | Ristorazione |
| 3 | Antonio | Mazzini | Informatica |
| # | Nome | Via | Lavoro |
|---|---|---|---|
| cella .active | cella .success | cella .danger | cella .info |
| riga .active | Mario | Roma | Abbigliamento |
| riga .success | Luigi | Garibaldi | Ristorazione |
| riga .warning | Antonio | Mazzini | Informatica |
| riga .danger | Nicola | Verdi | Farmacia |
| riga .info | Lorenzo | Montebello | Panetteria |
.table-responsive
La tabella scrolla orizzontalmente per i device con una viewport <768px
NB: la classe va nel contenitore della tabella, non in essa
<div class="table-responsive"> <table class="table"> <thead> ...
| # | Nome | Via | Lavoro |
|---|---|---|---|
| 1 | Mario | Roma | Abbigliamento |
| 2 | Luigi | Garibaldi | Ristorazione |
| 3 | Antonio | Mazzini | Informatica |