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 grunnklassen .tabletil en hvilken som helst <table>, og utvid 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>

Bord uten kant

Legg .table-borderlesstil for et bord uten rammer.

# Først Siste Håndtak
1 merke Otto @mdo
2 Jacob Thornton @fett
3 Fuglen Larry @twitter 
<table class="table table-borderless">
  <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>

.table-borderlesskan også brukes på mørke bord.

# Først Siste Håndtak
1 merke Otto @mdo
2 Jacob Thornton @fett
3 Fuglen Larry @twitter 
<table class="table table-borderless 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 for 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.

Disse tabellene kan virke ødelagte inntil deres responsive stiler gjelder for bestemte visningsportbredder.

# Overskrift Overskrift Overskrift Overskrift Overskrift Overskrift Overskrift Overskrift
1 Celle Celle Celle Celle Celle Celle Celle Celle
2 Celle Celle Celle Celle Celle Celle Celle Celle
3 Celle Celle Celle Celle Celle Celle Celle Celle 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Overskrift Overskrift Overskrift Overskrift Overskrift Overskrift Overskrift Overskrift
1 Celle Celle Celle Celle Celle Celle Celle Celle
2 Celle Celle Celle Celle Celle Celle Celle Celle
3 Celle Celle Celle Celle Celle Celle Celle Celle 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Overskrift Overskrift Overskrift Overskrift Overskrift Overskrift Overskrift Overskrift
1 Celle Celle Celle Celle Celle Celle Celle Celle
2 Celle Celle Celle Celle Celle Celle Celle Celle
3 Celle Celle Celle Celle Celle Celle Celle Celle 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Overskrift Overskrift Overskrift Overskrift Overskrift Overskrift Overskrift Overskrift
1 Celle Celle Celle Celle Celle Celle Celle Celle
2 Celle Celle Celle Celle Celle Celle Celle Celle
3 Celle Celle Celle Celle Celle Celle Celle Celle 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>