Source

Tabeller

Dokumentasjon og eksempler for opt-in styling av tabeller (gitt deres utbredte bruk i JavaScript-plugins) med Bootstrap.

Eksempler

På grunn av den utbredte bruken av tabeller på tvers av tredjeparts widgets som kalendere og datovelgere, har vi designet våre tabeller for å være opt-in . Bare legg til basisklassen .tabletil en hvilken som helst <table>, og forleng deretter med egendefinerte stiler eller de forskjellige inkluderte modifikasjonsklassene.

Ved å bruke den mest grunnleggende tabellmarkeringen, ser du hvordan .table-baserte tabeller ser ut i Bootstrap. Alle tabellstiler er arvet i Bootstrap 4 , noe som betyr at alle nestede tabeller vil bli stilt på samme måte som den overordnede.

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fuglen	@twitter

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Du kan også invertere fargene – med lys tekst på mørk bakgrunn – med .table-dark.

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fuglen	@twitter

<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Alternativer for bordhode

I likhet med tabeller og mørke tabeller, bruk modifikasjonsklassene .thead-lighteller .thead-darkfor å få <thead>s til å virke lys eller mørkegrå.

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fuglen	@twitter

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fuglen	@twitter

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

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	Larry	fuglen	@twitter

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fuglen	@twitter

<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Bordkantet bord

Legg .table-borderedtil kantlinjer på alle sider av tabellen og cellene.

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Sveverbare rader

Legg .table-hovertil for å aktivere en svevetilstand på tabellrader i en <tbody>.

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Lite bord

Legg .table-smtil for å gjøre bordene mer kompakte ved å kutte cellepolstring i to.

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	Først	Siste	Håndtak
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Kontekstuelle klasser

Bruk kontekstuelle klasser til å fargelegge tabellrader eller individuelle celler.

Klasse	Overskrift	Overskrift
Aktiv	Celle	Celle
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 rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>

  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

Vanlige bordbakgrunnsvarianter er ikke tilgjengelige med det mørke bordet, men du kan bruke tekst- eller bakgrunnsverktøy for å oppnå lignende stiler.

#	Overskrift	Overskrift
1	Celle	Celle
2	Celle	Celle
3	Celle	Celle
4	Celle	Celle
5	Celle	Celle
6	Celle	Celle
7	Celle	Celle
8	Celle	Celle
9	Celle	Celle

<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</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 .sr-onlyklassen.

Lag responsive tabeller ved å pakke noen .tablemed .table-responsive{-sm|-md|-lg|-xl}, slik at tabellen ruller horisontalt ved hvert max-widthbruddpunkt på opp til (men ikke inkludert) henholdsvis 576px, 768px, 992px og 1120px.

Merk at siden nettlesere for øyeblikket ikke støtter områdekontekstspørringer , omgår vi begrensningene til min-og max-prefikser og visningsporter med brøkbredder (som kan forekomme under visse forhold på enheter med høy dpi, for eksempel) ved å bruke verdier med høyere presisjon for disse sammenligningene .

Bildetekster

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	Larry	fuglen	@twitter

<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="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}.

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.

#	Overskrift	Overskrift	Overskrift	Overskrift	Overskrift	Overskrift	Overskrift	Overskrift	Overskrift
1	Celle	Celle	Celle	Celle	Celle	Celle	Celle	Celle	Celle
2	Celle	Celle	Celle	Celle	Celle	Celle	Celle	Celle	Celle
3	Celle	Celle	Celle	Celle	Celle	Celle	Celle	Celle	Celle

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Spesifikk bruddpunkt

Bruk .table-responsive{-sm|-md|-lg|-xl}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.

#	Overskrift	Overskrift	Overskrift	Overskrift	Overskrift
1	Celle	Celle	Celle	Celle	Celle
2	Celle	Celle	Celle	Celle	Celle
3	Celle	Celle	Celle	Celle	Celle

#	Overskrift	Overskrift	Overskrift	Overskrift	Overskrift
1	Celle	Celle	Celle	Celle	Celle
2	Celle	Celle	Celle	Celle	Celle
3	Celle	Celle	Celle	Celle	Celle

#	Overskrift	Overskrift	Overskrift	Overskrift	Overskrift
1	Celle	Celle	Celle	Celle	Celle
2	Celle	Celle	Celle	Celle	Celle
3	Celle	Celle	Celle	Celle	Celle

#	Overskrift	Overskrift	Overskrift	Overskrift	Overskrift
1	Celle	Celle	Celle	Celle	Celle
2	Celle	Celle	Celle	Celle	Celle
3	Celle	Celle	Celle	Celle	Celle

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>