Dokumentasjon og eksempler for opt-in styling av tabeller (gitt deres utbredte bruk i JavaScript-plugins) med Bootstrap.
På denne siden
Oversikt
På grunn av den utbredte bruken av <table>elementer på tvers av tredjeparts widgets som kalendere og datovelgere, er Bootstraps tabeller opt-in . Legg til basisklassen .tabletil en hvilken som helst <table>, og utvid deretter med våre valgfrie modifikasjonsklasser eller egendefinerte stiler. Alle tabellstiler arves ikke i Bootstrap, noe som betyr at alle nestede tabeller kan styles uavhengig av overordnet.
Ved å bruke den mest grunnleggende tabellmarkeringen, ser du hvordan .table-baserte tabeller ser ut i Bootstrap.
#
Først
Siste
Håndtak
1
merke
Otto
@mdo
2
Jacob
Thornton
@fett
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
Bruk kontekstuelle klasser til å fargelegge tabeller, tabellrader eller individuelle celler.
Klasse
Overskrift
Overskrift
Misligholde
Celle
Celle
Hoved
Celle
Celle
Sekundær
Celle
Celle
Suksess
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 hjelpeteknologier
Å bruke farger for å legge til mening gir bare en visuell indikasjon, som ikke vil bli formidlet til brukere av hjelpeteknologier – for eksempel skjermlesere. Sørg for at informasjon angitt med fargen enten er åpenbar fra selve innholdet (f.eks. den synlige teksten), eller er inkludert på alternative måter, for eksempel ekstra tekst skjult i .visually-hiddenklassen.
Aksentbord
Stripete rader
Bruk .table-stripedfor å legge til sebrastriper til en hvilken som helst tabellrad i <tbody>.
#
Først
Siste
Håndtak
1
merke
Otto
@mdo
2
Jacob
Thornton
@fett
3
Fuglen Larry
@twitter
<tableclass="table table-striped">
...
</table>
Disse klassene kan også legges til tabellvarianter:
Vi starter med å sette bakgrunnen til en tabellcelle med den --bs-table-bgegendefinerte egenskapen. Alle tabellvarianter angir deretter den egendefinerte egenskapen for å fargelegge tabellcellene. På denne måten får vi ikke problemer hvis halvtransparente farger brukes som tabellbakgrunn.
Deretter legger vi til en innfelt boksskygge på tabellcellene med et box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);lag på toppen av en spesifisert background-color. Fordi vi bruker en stor spredning og ingen uskarphet, vil fargen være monoton. Siden --bs-table-accent-bger deaktivert som standard, har vi ikke en standard boksskygge.
Når enten .table-striped, .table-hovereller .table-activeklasser legges til, --bs-table-accent-bgsettes den til en semitransparent farge for å fargelegge bakgrunnen.
For hver bordvariant genererer vi en --bs-table-accent-bgfarge med høyest kontrast avhengig av den fargen. For eksempel er aksentfargen for .table-primarymørkere mens .table-darkden har en lysere aksentfarge.
Tekst- og kantfarger genereres på samme måte, og fargene deres arves som standard.
Tabellceller av <thead>er alltid vertikalt justert til bunnen. Tabellceller i <tbody>arver justeringen fra <table>og er justert til toppen som standard. Bruk vertikaljusteringsklassene for å justere på nytt der det er nødvendig.
Overskrift 1
Overskrift 2
Overskrift 3
Overskrift 4
Denne cellen arver vertical-align: middle;fra tabellen
Denne cellen arver vertical-align: middle;fra tabellen
Denne cellen arver vertical-align: middle;fra tabellen
Dette her er litt plassholdertekst, ment å ta opp ganske mye vertikal plass, for å demonstrere hvordan den vertikale justeringen fungerer i de foregående cellene.
Denne cellen arver vertical-align: bottom;fra tabellraden
Denne cellen arver vertical-align: bottom;fra tabellraden
Denne cellen arver vertical-align: bottom;fra tabellraden
Dette her er litt plassholdertekst, ment å ta opp ganske mye vertikal plass, for å demonstrere hvordan den vertikale justeringen fungerer i de foregående cellene.
Denne cellen arver vertical-align: middle;fra tabellen
Denne cellen arver vertical-align: middle;fra tabellen
Denne cellen er justert til toppen.
Dette her er litt plassholdertekst, ment å ta opp ganske mye vertikal plass, for å demonstrere hvordan den vertikale justeringen fungerer i de foregående cellene.
<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>
Hekking
Kantstiler, aktive stiler og tabellvarianter arves ikke av nestede tabeller.
For å forhindre at stiler lekker til nestede tabeller, bruker vi underordnede kombinator- >velgeren ( ) i vår CSS. Siden vi må målrette alle tds og ths i thead, tbody, og tfoot, ville velgeren vår sett ganske lang ut uten den. Som sådan bruker vi den ganske merkelige .table > :not(caption) > * > *velgeren til å målrette alle tds og ths av .table, men ingen av noen potensielle nestede tabeller.
Vær oppmerksom på at hvis du legger til <tr>s som direkte underordnede av en tabell, vil disse <tr>bli pakket inn i en <tbody>som standard, og dermed får velgerne våre til å fungere etter hensikten.
Anatomi
Bordhode
I likhet med tabeller og mørke tabeller, bruk modifikasjonsklassene .table-lighteller .table-darkfor å få <thead>s til å virke lys eller mørkegrå.
A <caption>fungerer som en overskrift til en tabell. Den hjelper brukere med skjermlesere til å finne en tabell og forstå hva den handler om og bestemme om de vil lese den.
Liste over brukere
#
Først
Siste
Håndtak
1
merke
Otto
@mdo
2
Jacob
Thornton
@fett
3
Fuglen Larry
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Du kan også sette den <caption>på toppen av bordet med .caption-top.
Liste over brukere
#
Først
Siste
Håndtak
1
merke
Otto
@mdo
2
Jacob
Thornton
@fett
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 gjør det enkelt å rulle tabeller horisontalt. Gjør et hvilket som helst bord responsivt på tvers av alle visningsporter ved å pakke inn en .tablemed .table-responsive. Eller velg et maksimalt bruddpunkt som du vil ha en responsiv tabell med ved å bruke .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Vertikal klipping/trunkering
Responsive tabeller bruker overflow-y: hidden, som klipper av alt innhold som går utover bunn- eller toppkanten av tabellen. Spesielt kan dette klippe av rullegardinmenyer og andre tredjeparts widgets.
Alltid responsiv
På tvers av hvert bruddpunkt, bruk .table-responsivefor horisontalt rulling av tabeller.
Bruk .table-responsive{-sm|-md|-lg|-xl|-xxl}etter behov for å lage responsive tabeller opp til et bestemt bruddpunkt. Fra det bruddpunktet og oppover vil tabellen oppføre seg normalt og ikke rulle horisontalt.
Disse tabellene kan virke ødelagte inntil deres responsive stiler gjelder for bestemte visningsportbredder.