Zum Hauptinhalt springen Zur Dokumentennavigation springen
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>

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-success table-striped">
  ...
</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 gestreiften Variante 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 , 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-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));

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

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

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>

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
1 Markieren Otto @mdo
Header Header Header
EIN Zuerst Letzte
B Zuerst Letzte
C Zuerst Letzte
3 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 
<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:                 $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:          $border-color;

$table-striped-order:         odd;

$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-levelVariable aufgehellt.