Documentatie en voorbeelden voor opt-in-styling van tabellen (gezien hun algemeen gebruik in JavaScript-plug-ins) met Bootstrap.
Op deze pagina
Overzicht
Vanwege het wijdverbreide gebruik van <table>elementen in widgets van derden, zoals kalenders en datumkiezers, zijn de tabellen van Bootstrap opt-in . Voeg de basisklasse .tabletoe aan elke <table>, en breid deze vervolgens uit met onze optionele modificatieklassen of aangepaste stijlen. Alle tabelstijlen worden niet overgenomen in Bootstrap, wat betekent dat alle geneste tabellen onafhankelijk van de bovenliggende tabel kunnen worden gestyled.
Met behulp van de meest elementaire tabelopmaak ziet u hier hoe .table-gebaseerde tabellen eruitzien in Bootstrap.
#
Eerst
Laatst
Handvat
1
Markering
Otto
@mdo
2
Jakob
Thornton
@dik
3
Larry de vogel
@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>
varianten
Gebruik contextuele klassen om tabellen, tabelrijen of individuele cellen te kleuren.
Klas
rubriek
rubriek
Standaard
Cel
Cel
primair
Cel
Cel
Ondergeschikt
Cel
Cel
Succes
Cel
Cel
Gevaar
Cel
Cel
Waarschuwing
Cel
Cel
Info
Cel
Cel
Licht
Cel
Cel
Donker
Cel
Cel
<!-- 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>
Betekenis overbrengen aan ondersteunende technologieën
Het gebruik van kleur om betekenis toe te voegen geeft alleen een visuele indicatie, die niet wordt overgebracht aan gebruikers van ondersteunende technologieën, zoals schermlezers. Zorg ervoor dat informatie die wordt aangegeven met de kleur ofwel duidelijk is uit de inhoud zelf (bijv. de zichtbare tekst), of op alternatieve manieren wordt opgenomen, zoals extra tekst die verborgen is bij de .visually-hiddenklasse.
Tabellen met accenten
Gestreepte rijen
Gebruik .table-stripedom zebra-striping toe te voegen aan elke tabelrij binnen het <tbody>.
#
Eerst
Laatst
Handvat
1
Markering
Otto
@mdo
2
Jakob
Thornton
@dik
3
Larry de vogel
@twitter
<tableclass="table table-striped">
...
</table>
Deze klassen kunnen ook worden toegevoegd aan tafelvarianten:
We beginnen met het instellen van de achtergrond van een tabelcel met de --bs-table-bgaangepaste eigenschap. Alle tabelvarianten stellen vervolgens die aangepaste eigenschap in om de tabelcellen in te kleuren. Zo komen we niet in de problemen als semi-transparante kleuren worden gebruikt als tafelachtergronden.
Vervolgens voegen we een schaduw van een inzetvak toe aan de tabelcellen met box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);een laag bovenop een opgegeven background-color. Doordat we een enorme spreiding gebruiken en geen vervaging, zal de kleur eentonig zijn. Omdat --bs-table-accent-bgstandaard niet is ingesteld, hebben we geen standaardboxschaduw.
Wanneer .table-striped, .table-hoverof .table-activeklassen worden toegevoegd, --bs-table-accent-bgwordt de ingesteld op een semitransparante kleur om de achtergrond in te kleuren.
Voor elke tafelvariant genereren we --bs-table-accent-bgafhankelijk van die kleur een kleur met het hoogste contrast. De accentkleur voor .table-primaryis bijvoorbeeld donkerder terwijl .table-darkdeze een lichtere accentkleur heeft.
Tekst- en randkleuren worden op dezelfde manier gegenereerd en hun kleuren worden standaard overgenomen.
Tabelcellen van <thead>zijn altijd verticaal uitgelijnd met de onderkant. Tabelcellen in nemen <tbody>hun uitlijning over van <table>en worden standaard bovenaan uitgelijnd. Gebruik de klassen voor verticaal uitlijnen om waar nodig opnieuw uit te lijnen.
Koptekst 1
Kop 2
Kop 3
Rubriek 4
Deze cel erft vertical-align: middle;van de tabel
Deze cel erft vertical-align: middle;van de tabel
Deze cel erft vertical-align: middle;van de tabel
Dit hier is wat tijdelijke tekst, bedoeld om behoorlijk wat verticale ruimte in beslag te nemen, om te laten zien hoe de verticale uitlijning werkt in de voorgaande cellen.
Deze cel erft vertical-align: bottom;van de tabelrij
Deze cel erft vertical-align: bottom;van de tabelrij
Deze cel erft vertical-align: bottom;van de tabelrij
Dit hier is wat tijdelijke tekst, bedoeld om behoorlijk wat verticale ruimte in beslag te nemen, om te laten zien hoe de verticale uitlijning werkt in de voorgaande cellen.
Deze cel erft vertical-align: middle;van de tabel
Deze cel erft vertical-align: middle;van de tabel
Deze cel is uitgelijnd met de bovenkant.
Dit hier is wat tijdelijke tekst, bedoeld om behoorlijk wat verticale ruimte in beslag te nemen, om te laten zien hoe de verticale uitlijning werkt in de voorgaande cellen.
<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>
Nesten
Randstijlen, actieve stijlen en tabelvarianten worden niet overgenomen door geneste tabellen.
Om te voorkomen dat stijlen naar geneste tabellen lekken, gebruiken we de child combinator ( >) selector in onze CSS. tdOmdat we alle s en ths in de thead, tbody, en moeten targeten tfoot, zou onze selector er vrij lang uitzien zonder. Als zodanig gebruiken we de nogal vreemd uitziende .table > :not(caption) > * > *selector om alle tds en ths van de .table, maar geen van alle potentieel geneste tabellen te targeten.
Houd er rekening mee dat als u <tr>s toevoegt als directe onderliggende elementen van een tabel, deze standaard <tr>worden ingepakt in een <tbody>, waardoor onze selectors werken zoals bedoeld.
Anatomie
Tafelhoofd
Gebruik, net als bij tabellen en donkere tabellen, de modificatieklassen .table-lightof .table-darkom <thead>s licht- of donkergrijs te laten lijken.
A <caption>functioneert als een kop voor een tabel. Het helpt gebruikers met schermlezers om een tabel te vinden en te begrijpen waar het over gaat en te beslissen of ze het willen lezen.
Lijst met gebruikers
#
Eerst
Laatst
Handvat
1
Markering
Otto
@mdo
2
Jakob
Thornton
@dik
3
Larry de vogel
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Je kunt het ook <caption>op tafel leggen met .caption-top.
Lijst met gebruikers
#
Eerst
Laatst
Handvat
1
Markering
Otto
@mdo
2
Jakob
Thornton
@dik
3
Larry
de vogel
@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>
Responsieve tabellen
Met responsieve tabellen kunnen tabellen gemakkelijk horizontaal worden gescrold. Maak elke tabel responsief in alle viewports door een in te pakken .tablemet .table-responsive. Of kies een maximaal breekpunt waarmee u een responsieve tabel wilt hebben door te gebruiken .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Verticaal knippen/afkappen
Responsieve tabellen maken gebruik van overflow-y: hidden, dat alle inhoud afsnijdt die verder gaat dan de onder- of bovenrand van de tabel. Dit kan met name vervolgkeuzemenu's en andere widgets van derden afsnijden.
Altijd responsief
Gebruik over elk breekpunt .table-responsivevoor horizontaal scrollende tabellen.
Gebruik .table-responsive{-sm|-md|-lg|-xl|-xxl}indien nodig om responsieve tabellen te maken tot aan een bepaald breekpunt. Vanaf dat breekpunt zal de tabel zich normaal gedragen en niet horizontaal scrollen.
Deze tabellen kunnen worden weergegeven als gebroken totdat hun responsieve stijlen van toepassing zijn op specifieke viewport-breedten.
De factorvariabelen ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) worden gebruikt om het contrast in tabelvarianten te bepalen.
Naast de light & dark tafelvarianten worden themakleuren verlicht door de $table-bg-levelvariabele.