English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 Grundtutorials

Bootstrap4 Tabelle

HTML-Tabelle wird verwendet, um Daten in einem Rastermodus (wie Reihen und Spalten) anzuzeigen. Mit Bootstrap4, kann das Aussehen der Tabelle schnell und einfach erheblich ändern.

Bootstrap4 Grundtabelle

Bootstrap4 Durch .table-Klasse den Stil der Grundtabelle setzen, Beispiel folgt:

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Grundtabelle</h2>
　　<p>.table-Klasse, um den Stil der Grundtabelle zu setzen:</p>　　　　　　　　　　　　
　　<table class="table">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Vorname</th>
　　　　　　　　<th>Name</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Gestrichelte Tabelle

Durch Hinzufügen von .table-Die striped-Klasse, Sie werden in <tbody> Innerhalb der Reihen der Tabelle sehen Sie Streifen, wie im folgenden Beispiel gezeigt:

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Gestrichelte Tabelle</h2>
　　<p>Durch Hinzufügen von .table-Die striped-Klasse, um gestrichelte Tabelle zu setzen:</p>　　　　　　　　　　　　
　　<table　class="table　table-striped">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Vorname</th>
　　　　　　　　<th>Name</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Tabelle mit Rahmen

.table-Die bordered-Klasse kann eine Rahmen für die Tabelle hinzufügen

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Tabelle mit Rahmen</h2>
　　<p>.table-Die bordered-Klasse kann eine Rahmen für die Tabelle hinzufügen:</p>　　　　　　　　　　　　
　　<table　class="table　table-bordered">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Vorname</th>
　　　　　　　　<th>Name</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
</table>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Mauszeiger-Übergangszustand der Tabelle

.table-Die hover-Klasse kann den Mauszeiger-Übergangseffekt für jede Zeile der Tabelle hinzufügen (grauer Hintergrund):

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Mauszeiger-Übergangszustand der Tabelle</h2>
　　<p>.table-Die hover-Klasse kann den Mauszeiger-Übergangseffekt für jede Zeile der Tabelle hinzufügen (grauer Hintergrund):</p>　　　　　　　　　　　　
　　<table　class="table　table-hover">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Vorname</th>
　　　　　　　　<th>Name</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Tabelle mit schwarzem Hintergrund

.table-Die dunkle Klasse kann eine schwarze Hintergrundfarbe für die Tabelle hinzufügen:

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Tabelle mit schwarzem Hintergrund</h2>
　　<p>.table-Die dunkle Klasse kann eine schwarze Hintergrundfarbe für die Tabelle hinzufügen:</p>　　　　　　　　　　　　
　　<table　class="table　table-dark">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Vorname</th>
　　　　　　　　<th>Name</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Schwarze gestrichelte Tabelle

Verwendung gemeinsam .table-dunkle und .table-Die striped-Klasse kann eine schwarze gestrichelte Tabelle erstellen:

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Schwarze gestrichelte Tabelle</h2>
　　<p>Verwendung gemeinsam .table-dunkle und .table-Die striped-Klasse kann eine schwarze gestrichelte Tabelle erstellen:</p>　　　　　　　　　　　　
　　<table　class="table　table-dunkle Tabelle-striped">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Vorname</th>
　　　　　　　　<th>Name</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Mauszeiger-Übergangseffekt - Tabelle mit schwarzem Hintergrund

Verwendung gemeinsam .table-dunkle und .table-Die hover-Klasse kann den Mauszeiger-Übergangseffekt einer dunklen Tabelle mit schwarzem Hintergrund einstellen:

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Mauszeiger-Übergangseffekt　-　Tabelle mit schwarzem Hintergrund</h2>
　　<p>Verwendung gemeinsam .table-dunkle und .table-Die hover-Klasse kann den Mauszeiger-Übergangseffekt einer dunklen Tabelle mit schwarzem Hintergrund einstellen:</p>　　　　　　　　　　　　
　　<table　class="table　table-dunkle Tabelle-hover">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Vorname</th>
　　　　　　　　<th>Name</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Farbklasse mit spezifischer Bedeutung

Durch die Angabe einer bedeutsamen Farbklassifikation können Farben für die Zeilen oder Zellen der Tabelle festgelegt werden:

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Bedeutsame Farbklassifikation angeben</h2>
　　<p>Durch die Angabe einer bedeutsamen Farbklassifikation können Farben für die Zeilen oder Zellen der Tabelle festgelegt werden:</p>　　　　　　　　　　　　
　　<table class="table">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Vorname</th>
　　　　　　　　<th>Name</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>Default</td>
　　　　　　　　<td>Defaultson</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>　　　　　　
　　　　　　<tr class="table-primary">
　　　　　　　　<td>Primary</td>
　　　　　　　　<td>Joe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr class="table-success">
　　　　　　　　<td>Success</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr class="table-danger">
　　　　　　　　<td>Danger</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr class="table-info">
　　　　　　　　<td>Info</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr class="table-warning">
　　　　　　　　<td>Warning</td>
　　　　　　　　<td>Refs</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr class="table-active">
　　　　　　　　<td>Active</td>
　　　　　　　　<td>Activeson</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr class="table-secondary">
　　　　　　　　<td>Secondary</td>
　　　　　　　　<td>Secondson</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr class="table-light">
　　　　　　　　<td>Light</td>
　　　　　　　　<td>Angie</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr class="table-dark text-dark">
　　　　　　　　<td>Dark</td>
　　　　　　　　<td>Bo</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Die folgende Tabelle zeigt die Beschreibungen der Tabellenfarbklasse auf:

Class NameBeschreibung
.table-primaryBlau: bedeutet, dass dies eine wichtige Operation ist
.table-successGrün: bedeutet, dass dies eine erlaubte Operation ist
.table-dangerRot: bedeutet, dass dies eine gefährliche Operation ist
.table-infoHellblau: bedeutet, dass der Inhalt geändert wurde
.table-warningOrange: bedeutet, dass eine Aufmerksamkeit erfordert wird
.table-activeGrau: wird für den Mauszeiger-Effekt verwendet
.table-secondaryGrau: bedeutet, dass der Inhalt nicht besonders wichtig ist
.table-lightHellgrau, kann als Hintergrundfarbe der Tabellenzeilen verwendet werden
.table-darkDunkelgrau, kann als Hintergrundfarbe der Tabellenzeilen verwendet werden

Farbe des Kopfes

in Bootstrap v4.0.0-beta.2 in .thead-Die Klasse 'dark' wird verwendet, um dem Kopf der Tabelle eine schwarze Hintergrundfarbe hinzuzufügen, .thead-Die Klasse 'light' wird verwendet, um dem Kopf der Tabelle eine graue Hintergrundfarbe hinzuzufügen:

in Bootstrap v4.0.0-beta Diese Version, .thead-Die Klasse 'inverse' wird verwendet, um dem Kopf der Tabelle eine schwarze Hintergrundfarbe hinzuzufügen, .thead-Die Klasse 'default' wird verwendet, um dem Kopf der Tabelle eine graue Hintergrundfarbe hinzuzufügen.

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Farbe des Kopfes</h2>
　　<p>.thead-Die Klasse 'dark' wird verwendet, um dem Kopf der Tabelle eine schwarze Hintergrundfarbe hinzuzufügen, .thead-Die Klasse 'light' wird verwendet, um dem Kopf der Tabelle eine graue Hintergrundfarbe hinzuzufügen:</p>　　　　　　　　　　　　
　　<table class="table">
　　　　<thead　class="thead-dark">
　　　　　　<tr>
　　　　　　　　<th>Vorname</th>
　　　　　　　　<th>Name</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
　　<table class="table">
　　　　<thead　class="thead-light">
　　　　　　<tr>
　　　　　　　　<th>Vorname</th>
　　　　　　　　<th>Name</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Smaller Table

.table-sm class is used to set a smaller table by reducing the inner padding:

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Smaller Table</h2>
　　<p>.table-sm　class is used to set a smaller table by reducing the inner padding:/p>　　　　　　　　　　　　
　　<table　class="table　table-bordered　table-sm">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Vorname</th>
　　　　　　　　<th>Name</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Responsive Table

.table-responsive class is used to create responsive tables: When the screen width is less than 992px then it will create a horizontal scrollbar if the visible area width is greater than 992px then it will display a different effect (without a scrollbar):

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Responsive Table</h2>
　　<p>.table-responsive class is used to create responsive tables: When the screen width is less than　992px　then it will create a horizontal scrollbar if the visible area width is greater than　992px　then it will display a different effect (without a scrollbar):</p>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　<div class="table-responsive">　　　　　　　　　　
　　<table class="table">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>#</th>
　　　　　　　　<th>Vorname</th>
　　　　　　　　<th>Name</th>
　　　　　　　　<th>Alter</th>
　　　　　　　　<th>Stadt</th>
　　　　　　　　<th>Land</th>
　　　　　　　　<th>Sex</th>
　　　　　　　　<th>Beispiel</th>
　　　　　　　　<th>Beispiel</th>
　　　　　　　　<th>Beispiel</th>
　　　　　　　　<th>Beispiel</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td><1</td>
　　　　　　　　<td>Anna</td>
　　　　　　　　<td>Pitt</td>
　　　　　　　　<td><35</td>
　　　　　　　　<td>New York</td>
　　　　　　　　<td>USA</td>
　　　　　　　　<td>Weiblich</td>
　　　　　　　　<td>Ja</td>
　　　　　　　　<td>Ja</td>
　　　　　　　　<td>Ja</td>
　　　　　　　　<td>Ja</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
　　</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

You can set the scrollbar to appear at specific screen widths using the following classes:

Class NameScreen Width
.table-responsive-sm< 576px
.table-responsive-md< 768px
.table-responsive-lg< 992px
.table-responsive-xl< 1200px
<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Responsive Table</h2>
　　<p>.table-responsive-sm-Klasse wird verwendet, um responsivetable zu erstellen, bei der die Bildschirmbreite kleiner ist　576px zeigt die horizontale Scrollleiste.</p>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　<p>Passen Sie die Größe des Browsers an, um die Wirkung zu sehen.</p>
　　<div class="table-responsive-sm">　　　　　　　　　　
　　<table class="table">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>#</th>
　　　　　　　　<th>Vorname</th>
　　　　　　　　<th>Name</th>
　　　　　　　　<th>Alter</th>
　　　　　　　　<th>Stadt</th>
　　　　　　　　<th>Land</th>
　　　　　　　　<th>Sex</th>
　　　　　　　　<th>Beispiel</th>
　　　　　　　　<th>Beispiel</th>
　　　　　　　　<th>Beispiel</th>
　　　　　　　　<th>Beispiel</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td><1</td>
　　　　　　　　<td>Anna</td>
　　　　　　　　<td>Pitt</td>
　　　　　　　　<td><35</td>
　　　　　　　　<td>New York</td>
　　　　　　　　<td>USA</td>
　　　　　　　　<td>Weiblich</td>
　　　　　　　　<td>Ja</td>
　　　　　　　　<td>Ja</td>
　　　　　　　　<td>Ja</td>
　　　　　　　　<td>Ja</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
　　</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›
Bootstrap4 BildformateBootstrap4 Farben