in English

Tische

Dokumentation und Beispiele für das Opt-in-Styling von Tabellen (aufgrund ihrer weit verbreiteten Verwendung in JavaScript-Plugins) mit Bootstrap.

Auf dieser Seite

Überblick

Aufgrund der weit verbreiteten Verwendung von <table>Elementen in Drittanbieter-Widgets wie Kalendern und Datumsauswahlen sind Bootstrap-Tabellen Opt-in . Fügen Sie die Basisklasse .tablezu einem beliebigen <table>hinzu und erweitern Sie sie dann mit unseren optionalen Modifikatorklassen oder benutzerdefinierten Stilen. Alle Tabellenstile werden in Bootstrap nicht geerbt, was bedeutet, dass alle verschachtelten Tabellen unabhängig vom übergeordneten Stil gestaltet werden können.

Unter Verwendung des grundlegendsten Tabellen-Markups sehen Sie hier, wie .table-basierte Tabellen in Bootstrap aussehen.

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry der Vogel		@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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Varianten

Verwenden Sie kontextabhängige Klassen, um Tabellen, Tabellenzeilen oder einzelne Zellen einzufärben.

Klasse	Überschrift	Überschrift
Standard	Zelle	Zelle
Primär	Zelle	Zelle
Sekundär	Zelle	Zelle
Erfolg	Zelle	Zelle
Achtung	Zelle	Zelle
Warnung	Zelle	Zelle
Die Info	Zelle	Zelle
Licht	Zelle	Zelle
Dunkel	Zelle	Zelle

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

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

Bedeutung von Hilfstechnologien vermitteln

Die Verwendung von Farbe, um Bedeutung hinzuzufügen, bietet nur einen visuellen Hinweis, der Benutzern von Hilfstechnologien – wie z. B. Bildschirmlesegeräten – nicht vermittelt wird. Stellen Sie sicher, dass die durch die Farbe gekennzeichneten Informationen entweder aus dem Inhalt selbst ersichtlich sind (z. B. der sichtbare Text) oder durch alternative Mittel enthalten sind, z. B. durch zusätzlichen Text, der mit der .visually-hiddenKlasse verborgen ist.

Akzentuierte Tische

Gestreifte Reihen

Verwenden .table-stripedSie diese Option, um jeder Tabellenzeile innerhalb der <tbody>.

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry der Vogel		@twitter

<table class="table table-striped">
  ...
</table>

Gestreifte Säulen

Verwenden .table-striped-columnsSie diese Option, um jeder Tabellenspalte Zebrastreifen hinzuzufügen.

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry der Vogel		@twitter

<table class="table table-striped-columns">
  ...
</table>

Diese Klassen können auch Tabellenvarianten hinzugefügt werden:

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry der Vogel		@twitter

<table class="table table-dark table-striped">
  ...
</table>

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry der Vogel		@twitter

<table class="table table-dark table-striped-columns">
  ...
</table>

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry der Vogel		@twitter

<table class="table table-success table-striped">
  ...
</table>

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry der Vogel		@twitter

<table class="table table-success table-striped-columns">
  ...
</table>

Schwebefähige Zeilen

Hinzufügen .table-hover, um einen Hover-Status für Tabellenzeilen innerhalb einer <tbody>.

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry der Vogel		@twitter

<table class="table table-hover">
  ...
</table>

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry der Vogel		@twitter

<table class="table table-dark table-hover">
  ...
</table>

Diese schwebenden Reihen lassen sich auch mit der Variante der gestreiften Reihen kombinieren:

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry der Vogel		@twitter

<table class="table table-striped table-hover">
  ...
</table>

Aktive Tische

Markieren Sie eine Tabellenzeile oder -zelle, indem Sie eine .table-activeKlasse hinzufügen.

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry der Vogel		@twitter

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry der Vogel		@twitter

<table class="table table-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Wie funktionieren die Varianten und Akzenttabellen?

Für die akzentuierten Tabellen ( gestreifte Zeilen , gestreifte Spalten , schwebende Zeilen und aktive Tabellen ) haben wir einige Techniken verwendet, damit diese Effekte für alle unsere Tabellenvarianten funktionieren :

Wir beginnen damit, den Hintergrund einer Tabellenzelle mit der --bs-table-bgbenutzerdefinierten Eigenschaft festzulegen. Alle Tabellenvarianten legen dann diese benutzerdefinierte Eigenschaft fest, um die Tabellenzellen einzufärben. Auf diese Weise geraten wir nicht in Schwierigkeiten, wenn halbtransparente Farben als Tabellenhintergründe verwendet werden.
Dann fügen wir den Tabellenzellen einen eingefügten Rahmenschatten hinzu, indem wir eine box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);Schicht über einer beliebigen angegebenen background-color. Da wir eine große Ausbreitung und keine Unschärfe verwenden, wird die Farbe monoton sein. Da --bs-table-accent-bges standardmäßig nicht gesetzt ist, haben wir keinen Standard-Box-Schatten.
Wenn entweder .table-striped, .table-striped-columns, .table-hoveroder .table-activeKlassen hinzugefügt werden, --bs-table-accent-bgwird die auf eine halbtransparente Farbe gesetzt, um den Hintergrund einzufärben.
Für jede Tischvariante generieren wir --bs-table-accent-bgabhängig von dieser Farbe eine Farbe mit dem höchsten Kontrast. Beispielsweise ist die Akzentfarbe für .table-primarydunkler, während .table-darksie eine hellere Akzentfarbe hat.
Text- und Rahmenfarben werden auf die gleiche Weise generiert und ihre Farben werden standardmäßig vererbt.

Hinter den Kulissen sieht es so aus:

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
    $border-color: mix($color, $background, percentage($table-border-factor));

    --#{$prefix}table-color: #{$color};
    --#{$prefix}table-bg: #{$background};
    --#{$prefix}table-border-color: #{$border-color};
    --#{$prefix}table-striped-bg: #{$striped-bg};
    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$prefix}table-active-bg: #{$active-bg};
    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$prefix}table-hover-bg: #{$hover-bg};
    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

Tischränder

Umrandete Tische

Fügen Sie .table-borderedRahmen auf allen Seiten der Tabelle und der Zellen hinzu.

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry der Vogel		@twitter

<table class="table table-bordered">
  ...
</table>

Dienstprogramme für Rahmenfarben können hinzugefügt werden, um die Farben zu ändern:

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry der Vogel		@twitter

<table class="table table-bordered border-primary">
  ...
</table>

Tische ohne Grenzen

Hinzufügen .table-borderlessfür eine Tabelle ohne Rahmen.

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry der Vogel		@twitter

<table class="table table-borderless">
  ...
</table>

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry der Vogel		@twitter

<table class="table table-dark table-borderless">
  ...
</table>

Kleine Tische

Fügen Sie hinzu , um sie kompakter .table-smzu machen, .tableindem Sie alle Zellen paddinghalbieren.

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry der Vogel		@twitter

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

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry der Vogel		@twitter

<table class="table table-dark table-sm">
  ...
</table>

Tischgruppenteiler

Fügen Sie einen dickeren, dunkleren Rand zwischen den Tabellengruppen hinzu <thead>– , <tbody>, und <tfoot>– mit .table-group-divider. Passen Sie die Farbe an, indem Sie die ändern border-top-color(für die wir derzeit keine Utility-Klasse bereitstellen).

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry der Vogel		@twitter

html

<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 class="table-group-divider">
    <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>

Vertikale Ausrichtung

Tabellenzellen von <thead>sind immer vertikal nach unten ausgerichtet. Tabellenzellen <tbody>erben ihre Ausrichtung von <table>und sind standardmäßig oben ausgerichtet. Verwenden Sie die vertikalen Ausrichtungsklassen , um bei Bedarf neu auszurichten.

Überschrift 1	Überschrift 2	Überschrift 3	Überschrift 4
Diese Zelle erbt `vertical-align: middle;`von der Tabelle	Diese Zelle erbt `vertical-align: middle;`von der Tabelle	Diese Zelle erbt `vertical-align: middle;`von der Tabelle	Dies hier ist ein Platzhaltertext, der ziemlich viel vertikalen Platz einnehmen soll, um zu demonstrieren, wie die vertikale Ausrichtung in den vorhergehenden Zellen funktioniert.
Diese Zelle erbt `vertical-align: bottom;`von der Tabellenzeile	Diese Zelle erbt `vertical-align: bottom;`von der Tabellenzeile	Diese Zelle erbt `vertical-align: bottom;`von der Tabellenzeile	Dies hier ist ein Platzhaltertext, der ziemlich viel vertikalen Platz einnehmen soll, um zu demonstrieren, wie die vertikale Ausrichtung in den vorhergehenden Zellen funktioniert.
Diese Zelle erbt `vertical-align: middle;`von der Tabelle	Diese Zelle erbt `vertical-align: middle;`von der Tabelle	Diese Zelle ist nach oben ausgerichtet.	Dies hier ist ein Platzhaltertext, der ziemlich viel vertikalen Platz einnehmen soll, um zu demonstrieren, wie die vertikale Ausrichtung in den vorhergehenden Zellen funktioniert.

<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Verschachtelung

Rahmenstile, aktive Stile und Tabellenvarianten werden nicht von verschachtelten Tabellen geerbt.

Zuerst

Letzte

Handhaben

Markieren

Otto

@mdo

Header	Header	Header
EIN	Zuerst	Letzte
B	Zuerst	Letzte
C	Zuerst	Letzte

Larry

der Vogel

@twitter

<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Wie Nesting funktioniert

Um zu verhindern, dass Stile in verschachtelte Tabellen gelangen, verwenden wir den untergeordneten Kombinator ( >)-Selektor in unserem CSS. Da wir auf alle tds und ths in thead, tbody, und abzielen müssen tfoot, würde unser Selektor ohne sie ziemlich lang aussehen. Daher verwenden wir den ziemlich seltsam aussehenden .table > :not(caption) > * > *Selektor, um alle tds und ths der .table, aber keine potenziell verschachtelten Tabellen anzusprechen.

Beachten Sie, dass, wenn Sie <tr>s als direkte untergeordnete Elemente einer Tabelle hinzufügen, diese standardmäßig <tr>in a <tbody>eingeschlossen werden, sodass unsere Selektoren wie beabsichtigt funktionieren.

Anatomie

Tischkopf

Verwenden Sie ähnlich wie bei Tabellen und dunklen Tabellen die Modifikatorklassen .table-lightoder .table-dark, um <thead>s hell- oder dunkelgrau erscheinen zu lassen.

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry	der Vogel	@twitter

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry	der Vogel	@twitter

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Tischfuß

#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry	der Vogel	@twitter
Fusszeile	Fusszeile	Fusszeile	Fusszeile

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Bildunterschriften

A <caption>funktioniert wie eine Überschrift für eine Tabelle. Es hilft Benutzern mit Screenreadern, eine Tabelle zu finden und zu verstehen, worum es geht, und zu entscheiden, ob sie sie lesen möchten.

Liste der Benutzer
#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry der Vogel		@twitter

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Sie können das auch mit <caption>auf den Tisch legen .caption-top.

Liste der Benutzer
#	Zuerst	Letzte	Handhaben
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry	der Vogel	@twitter

html

<table class="table caption-top">
  <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 Tabellen

Responsive Tabellen ermöglichen ein einfaches horizontales Scrollen von Tabellen. Machen Sie jede Tabelle in allen Ansichtsfenstern reaktionsfähig, indem Sie a .tablemit umschließen .table-responsive. Oder wählen Sie einen maximalen Haltepunkt aus, bis zu dem eine reaktionsschnelle Tabelle verwendet werden soll, indem Sie verwenden .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Vertikales Abschneiden/Abschneiden

Responsive Tabellen verwenden overflow-y: hidden, wodurch alle Inhalte abgeschnitten werden, die über die unteren oder oberen Ränder der Tabelle hinausgehen. Dies kann insbesondere Dropdown-Menüs und andere Widgets von Drittanbietern abschneiden.

Immer ansprechbar

Verwenden Sie über jeden Haltepunkt hinweg, um .table-responsiveTabellen horizontal zu scrollen.

#	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift
1	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle
2	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle
3	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle

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

Breakpoint-spezifisch

Verwenden Sie .table-responsive{-sm|-md|-lg|-xl|-xxl}es nach Bedarf, um responsive Tabellen bis zu einem bestimmten Haltepunkt zu erstellen. Ab diesem Haltepunkt verhält sich die Tabelle normal und scrollt nicht horizontal.

Diese Tabellen können unterbrochen erscheinen, bis ihre ansprechenden Stile bei bestimmten Darstellungsbereichsbreiten angewendet werden.

#	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift
1	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle
2	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle
3	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle

#	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift
1	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle
2	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle
3	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle

#	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift
1	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle
2	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle
3	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle

#	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift
1	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle
2	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle
3	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle

#	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift
1	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle
2	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle
3	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle

#	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift	Überschrift
1	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle
2	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle
3	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle	Zelle

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

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

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

Sass

Variablen

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 var(--#{$prefix}body-color);
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$table-group-separator-color: currentcolor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

Schleife

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

Anpassen

Die Faktorvariablen ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) dienen zur Bestimmung des Kontrasts in Tabellenvarianten.
Abgesehen von den hellen und dunklen Tischvarianten werden Themenfarben durch die $table-bg-scaleVariable aufgehellt.