Source

Tabeller

Dokumentation och exempel för opt-in-stil av tabeller (med tanke på deras vanliga användning i JavaScript-plugins) med Bootstrap.

Exempel

På grund av den utbredda användningen av tabeller över tredjepartswidgets som kalendrar och datumväljare, har vi designat våra tabeller för att vara opt-in . Lägg bara till basklassen .tabletill valfri <table>, utöka sedan med anpassade stilar eller våra olika inkluderade modifieringsklasser.

Med den mest grundläggande tabelluppmärkningen, så här .tableser -baserade tabeller ut i Bootstrap. Alla tabellstilar ärvs i Bootstrap 4 , vilket betyder att alla kapslade tabeller kommer att utformas på samma sätt som den överordnade.

#	Först	Sista	Hantera
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fågeln	@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 också invertera färgerna – med ljus text på mörk bakgrund – med .table-dark.

#	Först	Sista	Hantera
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fågeln	@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>

Alternativ för bordshuvud

I likhet med tabeller och mörka tabeller, använd modifieringsklasserna .thead-lighteller .thead-darkför att få <thead>s att se ljust eller mörkgrå ut.

#	Först	Sista	Hantera
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fågeln	@Twitter

#	Först	Sista	Hantera
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fågeln	@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>

Randiga rader

Använd .table-stripedför att lägga till zebrastrimningar till valfri tabellrad inom <tbody>.

#	Först	Sista	Hantera
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fågeln	@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	Sista	Hantera
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fågeln	@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>

Kantat bord

Lägg .table-borderedtill kanter på alla sidor av tabellen och cellerna.

#	Först	Sista	Hantera
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fågeln 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	Sista	Hantera
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fågeln 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>

Svävbara rader

Lägg .table-hovertill för att aktivera ett hovringsläge på tabellrader inom en <tbody>.

#	Först	Sista	Hantera
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fågeln 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	Sista	Hantera
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fågeln 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>

Litet bord

Lägg .table-smtill för att göra borden mer kompakta genom att halvera cellstoppningen.

#	Först	Sista	Hantera
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fågeln 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	Sista	Hantera
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fågeln 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>

Kontextuella klasser

Använd kontextuella klasser för att färglägga tabellrader eller enskilda celler.

Klass	Rubrik	Rubrik
Aktiva	Cell	Cell
Standard	Cell	Cell
Primär	Cell	Cell
Sekundär	Cell	Cell
Framgång	Cell	Cell
Fara	Cell	Cell
Varning	Cell	Cell
Info	Cell	Cell
Ljus	Cell	Cell
Mörk	Cell	Cell

<!-- 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>

Vanliga tabellbakgrundsvarianter är inte tillgängliga med det mörka bordet, men du kan använda text- eller bakgrundsverktyg för att uppnå liknande stilar.

#	Rubrik	Rubrik
1	Cell	Cell
2	Cell	Cell
3	Cell	Cell
4	Cell	Cell
5	Cell	Cell
6	Cell	Cell
7	Cell	Cell
8	Cell	Cell
9	Cell	Cell

<!-- 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>

Förmedla mening till hjälpmedel

Att använda färg för att lägga till mening ger bara en visuell indikation som inte kommer att förmedlas till användare av hjälpmedel – som skärmläsare. Se till att information som betecknas med färgen antingen är uppenbar från själva innehållet (t.ex. den synliga texten), eller är inkluderad på andra sätt, såsom ytterligare text gömd med .sr-onlyklassen.

Skapa responsiva tabeller genom att linda alla .tablemed .table-responsive{-sm|-md|-lg|-xl}, så att tabellen rullar horisontellt vid varje max-widthbrytpunkt på upp till (men inte inklusive) 576px, 768px, 992px respektive 1120px.

Observera att eftersom webbläsare för närvarande inte stöder intervallkontextfrågor , arbetar vi kring begränsningarna för min-och max-prefix och visningsportar med bråkbredder (vilket kan inträffa under vissa förhållanden på enheter med hög dpi, till exempel) genom att använda värden med högre precision för dessa jämförelser .

Bildtexter

A <caption>fungerar som en rubrik till en tabell. Det hjälper användare med skärmläsare att hitta en tabell och förstå vad den handlar om och bestämma om de vill läsa den.

Lista över användare
#	Först	Sista	Hantera
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fågeln	@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>

Responsiva tabeller

Responsiva tabeller gör att tabeller enkelt kan rullas horisontellt. Gör vilket bord som helst responsivt i alla visningsportar genom att slå in en .tablemed .table-responsive. Eller välj en maximal brytpunkt som du vill ha en responsiv tabell med genom att använda .table-responsive{-sm|-md|-lg|-xl}.

Vertikal klippning/trunkering

Responsiva tabeller använder overflow-y: hidden, som klipper bort allt innehåll som går utanför bordets nedre eller övre kanter. I synnerhet kan detta klippa bort rullgardinsmenyer och andra widgets från tredje part.

Alltid lyhörd

Över varje brytpunkt, använd .table-responsiveför horisontell rullning av tabeller.

#	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

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

Brytpunktsspecifik

Använd .table-responsive{-sm|-md|-lg|-xl}efter behov för att skapa responsiva tabeller upp till en viss brytpunkt. Från den brytpunkten och uppåt kommer tabellen att bete sig normalt och inte rulla horisontellt.

#	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

#	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

#	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

#	Rubrik	Rubrik	Rubrik	Rubrik	Rubrik
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

<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>