Dokumentation och exempel för opt-in-stil av tabeller (med tanke på deras vanliga användning i JavaScript-plugins) med Bootstrap.
På den här sidan
Översikt
På grund av den utbredda användningen av <table>element i tredjepartswidgets som kalendrar och datumväljare, är Bootstraps tabeller opt-in . Lägg till basklassen .tabletill valfri <table>och utöka sedan med våra valfria modifieringsklasser eller anpassade stilar. Alla tabellstilar ärvs inte i Bootstrap, vilket innebär att alla kapslade tabeller kan formateras oberoende av den överordnade.
Med den mest grundläggande tabelluppmärkningen, så här .tableser -baserade tabeller ut i Bootstrap.
#
Först
Sista
Hantera
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fett
3
Fågeln Larry
@Twitter
<tableclass="table"><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>
Varianter
Använd kontextuella klasser för att färglägga tabeller, tabellrader eller enskilda celler.
Klass
Rubrik
Rubrik
Standard
Cell
Cell
Primär
Cell
Cell
Sekundär
Cell
Cell
Framgång
Cell
Cell
Fara
Cell
Cell
Varning
Cell
Cell
Info
Cell
Cell
Ljus
Cell
Cell
Mörk
Cell
Cell
<!-- On tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><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-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>
Förmedla mening till hjälpmedel
Att använda färg för att lägga till mening ger bara en visuell indikation som inte kommer att förmedlas till användare av hjälpmedel – som skärmläsare. Se till att information som betecknas med färgen antingen är uppenbar från själva innehållet (t.ex. den synliga texten), eller är inkluderad på andra sätt, såsom ytterligare text gömd med .visually-hiddenklassen.
Bord med accent
Randiga rader
Använd .table-stripedför att lägga till zebrastrimningar till valfri tabellrad inom <tbody>.
#
Först
Sista
Hantera
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fett
3
Fågeln Larry
@Twitter
<tableclass="table table-striped">
...
</table>
Dessa klasser kan också läggas till i tabellvarianter:
Vi börjar med att ställa in bakgrunden för en tabellcell med den --bs-table-bganpassade egenskapen. Alla tabellvarianter ställer sedan in den anpassade egenskapen för att färglägga tabellcellerna. På så sätt hamnar vi inte i problem om halvtransparenta färger används som bordsbakgrunder.
Sedan lägger vi till en infälld boxskugga på tabellcellerna med ett box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);lager ovanpå en angiven background-color. Eftersom vi använder en enorm spridning och ingen oskärpa blir färgen monoton. Eftersom --bs-table-accent-bgdet inte är inställt som standard har vi ingen standardboxskugga.
När antingen .table-striped, .table-hovereller .table-activeklasser läggs till, --bs-table-accent-bgställs den in på en halvtransparent färg för att färglägga bakgrunden.
För varje bordsvariant genererar vi en --bs-table-accent-bgfärg med högsta kontrast beroende på den färgen. Till exempel är accentfärgen för .table-primarymörkare medan den .table-darkhar en ljusare accentfärg.
Text- och kantfärger genereras på samma sätt och deras färger ärvs som standard.
Tabellcellerna <thead>är alltid vertikalt inriktade mot botten. Tabellceller i <tbody>ärver sin justering från <table>och är justerade till toppen som standard. Använd klasserna för vertikal justering för att justera om det behövs.
Rubrik 1
Rubrik 2
Rubrik 3
Rubrik 4
Denna cell ärver vertical-align: middle;från tabellen
Denna cell ärver vertical-align: middle;från tabellen
Denna cell ärver vertical-align: middle;från tabellen
Det här är lite platshållartext, avsedd att ta upp en hel del vertikalt utrymme, för att visa hur den vertikala justeringen fungerar i de föregående cellerna.
Denna cell ärver vertical-align: bottom;från tabellraden
Denna cell ärver vertical-align: bottom;från tabellraden
Denna cell ärver vertical-align: bottom;från tabellraden
Det här är lite platshållartext, avsedd att ta upp en hel del vertikalt utrymme, för att visa hur den vertikala justeringen fungerar i de föregående cellerna.
Denna cell ärver vertical-align: middle;från tabellen
Denna cell ärver vertical-align: middle;från tabellen
Denna cell är inriktad mot toppen.
Det här är lite platshållartext, avsedd att ta upp en hel del vertikalt utrymme, för att visa hur den vertikala justeringen fungerar i de föregående cellerna.
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
Häckande
Kantstilar, aktiva stilar och tabellvarianter ärvs inte av kapslade tabeller.
För att förhindra att några stilar läcker till kapslade tabeller använder vi >väljaren underordnad kombinator ( ) i vår CSS. Eftersom vi måste rikta in oss på alla tds och ths i thead, tbody, och tfoot, skulle vår väljare se ganska lång ut utan den. Som sådan använder vi den ganska udda .table > :not(caption) > * > *väljaren för att rikta in alla tds och ths i .table, men ingen av några potentiella kapslade tabeller.
Observera att om du lägger till <tr>s som direkta underordnade av en tabell, kommer de <tr>att vara inslagna i en som <tbody>standard, vilket gör att våra väljare fungerar som avsett.
Anatomi
Bordshuvud
I likhet med tabeller och mörka tabeller, använd modifieringsklasserna .table-lighteller .table-darkför att få <thead>s att se ljust eller mörkgrå ut.
A <caption>fungerar som en rubrik till en tabell. Det hjälper användare med skärmläsare att hitta en tabell och förstå vad den handlar om och bestämma om de vill läsa den.
Lista över användare
#
Först
Sista
Hantera
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fett
3
Fågeln Larry
@Twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Du kan också lägga den <caption>på toppen av bordet med .caption-top.
Lista över användare
#
Först
Sista
Hantera
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fett
3
Larry
fågeln
@Twitter
<tableclass="table caption-top"><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>
Responsiva tabeller
Responsiva tabeller gör att tabeller enkelt kan rullas horisontellt. Gör vilket bord som helst responsivt i alla visningsportar genom att slå in en .tablemed .table-responsive. Eller välj en maximal brytpunkt som du vill ha en responsiv tabell med genom att använda .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Vertikal klippning/trunkering
Responsiva tabeller använder overflow-y: hidden, som klipper bort allt innehåll som går utanför bordets nedre eller övre kanter. I synnerhet kan detta klippa bort rullgardinsmenyer och andra widgets från tredje part.
Alltid lyhörd
Över varje brytpunkt, använd .table-responsiveför horisontell rullning av tabeller.
Använd .table-responsive{-sm|-md|-lg|-xl|-xxl}efter behov för att skapa responsiva tabeller upp till en viss brytpunkt. Från den brytpunkten och uppåt kommer tabellen att bete sig normalt och inte rulla horisontellt.
Dessa tabeller kan verka trasiga tills deras responsiva stilar tillämpas på specifika visningsportbredder.