Dokumentation og eksempler på opt-in-stiling af tabeller (i betragtning af deres udbredte brug i JavaScript-plugins) med Bootstrap.
På denne side
Oversigt
På grund af den udbredte brug af <table>elementer på tværs af tredjeparts widgets som kalendere og datovælgere, er Bootstraps tabeller tilvalgte . Tilføj basisklassen .tabletil enhver <table>, og udvid derefter med vores valgfri modifikatorklasser eller brugerdefinerede stilarter. Alle tabelstile nedarves ikke i Bootstrap, hvilket betyder, at alle indlejrede tabeller kan styles uafhængigt af overordnet.
Ved at bruge den mest grundlæggende tabelmarkering kan du se her, hvordan .table-baserede tabeller ser ud i Bootstrap.
#
Først
Sidst
Håndtere
1
Mærke
Otto
@mdo
2
Jacob
Thornton
@fed
3
Fuglen 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
Brug kontekstuelle klasser til at farve tabeller, tabelrækker eller individuelle celler.
Klasse
Overskrift
Overskrift
Standard
Celle
Celle
Primær
Celle
Celle
Sekundær
Celle
Celle
Succes
Celle
Celle
Fare
Celle
Celle
Advarsel
Celle
Celle
Info
Celle
Celle
Lys
Celle
Celle
Mørk
Celle
Celle
<!-- 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>
Formidle mening til hjælpeteknologier
Brug af farve til at tilføje betydning giver kun en visuel indikation, som ikke vil blive formidlet til brugere af hjælpeteknologier - såsom skærmlæsere. Sørg for, at oplysninger, der er angivet med farven, enten er tydelige fra selve indholdet (f.eks. den synlige tekst), eller er inkluderet via alternative måder, såsom ekstra tekst skjult i .visually-hiddenklassen.
Borde med accent
Stribede rækker
Bruges .table-stripedtil at tilføje zebrastriber til enhver tabelrække i <tbody>.
Vi starter med at indstille baggrunden for en tabelcelle med den --bs-table-bgtilpassede egenskab. Alle tabelvarianter indstiller derefter den brugerdefinerede egenskab til at farvelægge tabelcellerne. På denne måde kommer vi ikke i problemer, hvis der bruges semi-transparente farver som bordbaggrunde.
Derefter tilføjer vi en indsat boksskygge på tabelcellerne med box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);et lag oven på en hvilken som helst specificeret background-color. Fordi vi bruger en enorm spredning og ingen sløring, bliver farven monoton. Da --bs-table-accent-bgden er deaktiveret som standard, har vi ikke en standard boksskygge.
Når enten .table-striped, .table-hovereller .table-activeklasser tilføjes, --bs-table-accent-bgindstilles den til en semitransparent farve for at farvelægge baggrunden.
For hver bordvariant genererer vi en --bs-table-accent-bgfarve med den højeste kontrast afhængigt af den farve. For eksempel er accentfarven for .table-primarymørkere, mens .table-darkden har en lysere accentfarve.
Tekst- og kantfarver genereres på samme måde, og deres farver nedarves som standard.
Tabelceller af <thead>er altid lodret justeret til bunden. Tabelceller i <tbody>arver deres justering fra <table>og justeres til toppen som standard. Brug de vertikale align -klasser til at genjustere, hvor det er nødvendigt.
Overskrift 1
Overskrift 2
Overskrift 3
Overskrift 4
Denne celle arver vertical-align: middle;fra tabellen
Denne celle arver vertical-align: middle;fra tabellen
Denne celle arver vertical-align: middle;fra tabellen
Dette her er noget pladsholdertekst, beregnet til at optage en del lodret plads, for at demonstrere, hvordan den lodrette justering fungerer i de foregående celler.
Denne celle arver vertical-align: bottom;fra tabelrækken
Denne celle arver vertical-align: bottom;fra tabelrækken
Denne celle arver vertical-align: bottom;fra tabelrækken
Dette her er noget pladsholdertekst, beregnet til at optage en del lodret plads, for at demonstrere, hvordan den lodrette justering fungerer i de foregående celler.
Denne celle arver vertical-align: middle;fra tabellen
Denne celle arver vertical-align: middle;fra tabellen
Denne celle er justeret til toppen.
Dette her er noget pladsholdertekst, beregnet til at optage en del lodret plads, for at demonstrere, hvordan den lodrette justering fungerer i de foregående celler.
<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>
Indlejring
Kantstile, aktive typografier og tabelvarianter nedarves ikke af indlejrede tabeller.
For at forhindre , at stilarter lækker til indlejrede tabeller, bruger vi underordnet kombinator ( >)-vælgeren i vores CSS. Da vi skal målrette mod alle tds og ths i thead, tbody, og tfoot, ville vores vælger se ret lang ud uden den. Som sådan bruger vi den ret mærkelige .table > :not(caption) > * > *udvælger til at målrette mod alle tds og ths i .table, men ingen af nogen potentielle indlejrede tabeller.
Bemærk, at hvis du tilføjer <tr>s som direkte underordnede af en tabel, vil disse <tr>blive pakket ind i en <tbody>som standard, hvilket får vores vælgere til at fungere efter hensigten.
Anatomi
Bordhoved
I lighed med tabeller og mørke tabeller, brug modifikatorklasserne .table-lighteller .table-darkfor at få <thead>s til at se lys eller mørkegrå ud.
A <caption>fungerer som en overskrift til en tabel. Det hjælper brugere med skærmlæsere med at finde en tabel og forstå, hvad den handler om, og beslutte, om de vil læse den.
Liste over brugere
#
Først
Sidst
Håndtere
1
Mærke
Otto
@mdo
2
Jacob
Thornton
@fed
3
Fuglen Larry
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Du kan også sætte den <caption>på toppen af bordet med .caption-top.
Liste over brugere
#
Først
Sidst
Håndtere
1
Mærke
Otto
@mdo
2
Jacob
Thornton
@fed
3
Larry
fuglen
@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>
Responsive tabeller
Responsive tabeller gør det nemt at rulle tabeller vandret. Gør ethvert bord responsivt på tværs af alle visningsporte ved at indpakke en .tablemed .table-responsive. Eller vælg et maksimalt breakpoint, som du vil have en responsiv tabel med ved at bruge .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Lodret klipning/trunkering
Responsive tabeller gør brug af overflow-y: hidden, som klipper alt indhold af, der går ud over bordets nederste eller øverste kant. Dette kan især klippe dropdown-menuer og andre tredjeparts-widgets af.
Altid lydhør
På tværs af hvert brudpunkt, brug .table-responsivetil vandret rulning af tabeller.
Brug .table-responsive{-sm|-md|-lg|-xl|-xxl}efter behov til at oprette responsive tabeller op til et bestemt breakpoint. Fra dette brudpunkt og opefter vil tabellen opføre sig normalt og ikke rulle vandret.
Disse tabeller kan forekomme ødelagte, indtil deres responsive stilarter gælder ved bestemte visningsportebredder.