Bootstrap4 Tutoriel de base

Bootstrap4 Formes d'images Bootstrap4 Couleurs

Bootstrap4 Tableau

Le tableau HTML est utilisé pour afficher les données en mode grille (comme les lignes et les colonnes). Utiliser Bootstrap4peut changer rapidement et simplement l'apparence du tableau.

Bootstrap4 Tableau de base

Bootstrap4 Définir le style du tableau de base avec .table classe, comme dans les exemples suivants :

Example

<!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>Tableau de base</h2>
　　<p>.table classe pour définir le style de tableau de base :/p>　　　　　　　　　　　　
　　<table class="table">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th Prénom</th>
　　　　　　　　<th Nom de famille</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>

Testez pour voir ‹/›

Tableau à bandes

Ajouter .table-La classe striped, vous verrez <tbody> Vous pouvez voir les bandes sur les lignes à l'intérieur, comme dans les exemples suivants :

Example

<!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>Tableau à bandes</h2>
　　<p>Ajouter .table-La classe striped, pour définir le tableau à bandes :/p>　　　　　　　　　　　　
　　<table class="table table-striped">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th Prénom</th>
　　　　　　　　<th Nom de famille</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>

Testez pour voir ‹/›

Tableau avec bordure

.table-La classe bordered peut ajouter une bordure au tableau

Example

<!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>Tableau avec bordure</h2>
　　<p>.table-La classe bordered peut ajouter une bordure au tableau :/p>　　　　　　　　　　　　
　　<table class="table table-bordered">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th Prénom</th>
　　　　　　　　<th Nom de famille</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>

Testez pour voir ‹/›

Tableau en état de survol au curseur

.table-La classe hover peut ajouter un effet de survol au curseur à chaque ligne du tableau (fond gris) :

Example

<!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>Tableau en état de survol au curseur</h2>
　　<p>.table-La classe hover peut ajouter un effet de survol au curseur à chaque ligne du tableau (fond gris) : </p>　　　　　　　　　　　　
　　<table class="table table-hover">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th Prénom</th>
　　　　　　　　<th Nom de famille</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>

Testez pour voir ‹/›

Tableau de fond noir

.table-La classe dark peut ajouter un fond noir au tableau :

Example

<!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>Tableau de fond noir</h2>
　　<p>.table-La classe dark peut ajouter un fond noir au tableau :/p>　　　　　　　　　　　　
　　<table class="table table-dark">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th Prénom</th>
　　　　　　　　<th Nom de famille</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>

Testez pour voir ‹/›

Tableau de fond noir avec des bandes

Utiliser ensemble .table-dark et .table-La classe striped peut créer un tableau de fond noir avec des bandes :

Example

<!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>Tableau de fond noir avec des bandes</h2>
　　<p>Utiliser ensemble .table-dark et .table-La classe striped peut créer un tableau de fond noir avec des bandes : </p>　　　　　　　　　　　　
　　<table class="table table-dark　table-striped">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th Prénom</th>
　　　　　　　　<th Nom de famille</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>

Testez pour voir ‹/›

Effet de survol au curseur - Tableau de fond noir

Utiliser ensemble .table-dark et .table-La classe hover peut définir l'effet de survol au curseur pour le tableau de fond noir :

Example

<!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>Effet de survol au curseur　-　Tableau de fond noir/h2>
　　<p>Utiliser ensemble .table-dark et .table-La classe hover peut définir l'effet de survol au curseur pour le tableau de fond noir : </p>　　　　　　　　　　　　
　　<table class="table table-dark　table-hover">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th Prénom</th>
　　　　　　　　<th Nom de famille</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>

Testez pour voir ‹/›

Couleur de signification spécifique

En spécifiant des classes de couleurs à sens, vous pouvez définir la couleur des lignes ou des cellules du tableau :

Example

<!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>Spécifier des classes de couleurs à sens</h2>
　　<p>En spécifiant des classes de couleurs à sens, vous pouvez définir la couleur des lignes ou des cellules du tableau : </p>　　　　　　　　　　　　
　　<table class="table">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th Prénom</th>
　　　　　　　　<th Nom de famille</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-texte foncé-dark">
　　　　　　　　<td>Dark</td>
　　　　　　　　<td>Bo</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>

Testez pour voir ‹/›

Le tableau suivant liste les descriptions des classes de couleurs de tableau:

Class name	Description
.table-primary	Bleu: indique une opération importante
.table-success	Vert: indique une opération autorisée
.table-danger	Rouge: indique que c'est une opération dangereuse
.table-info	Bleu clair: indique que le contenu a été modifié
.table-warning	Orange: indique une opération à surveiller
.table-active	Gris: utilisé pour l'effet de survol de la souris
.table-secondary	Gris: indique que le contenu n'est pas très important
.table-light	Gris clair, peut être utilisé comme fond des lignes de tableau
.table-dark	Gris foncé, peut être utilisé comme fond des lignes de tableau

Couleur des en-têtes

Dans Bootstrap v4.0.0-beta.2 dans .thead-La classe 'dark' est utilisée pour ajouter un fond noir aux en-têtes de table, .thead-La classe 'light' est utilisée pour ajouter un fond gris aux en-têtes de table:

Dans Bootstrap v4.0.0-beta Cette version, .thead-La classe 'inverse' est utilisée pour ajouter un fond noir aux en-têtes de table, .thead-La classe 'default' est utilisée pour ajouter un fond gris aux en-têtes de table.

Example

<!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>Couleur des en-têtes</h2>
　　<p>.thead-La classe 'dark' est utilisée pour ajouter un fond noir aux en-têtes de table, .thead-La classe 'light' est utilisée pour ajouter un fond gris aux en-têtes de table: </p>　　　　　　　　　　　　
　　<table class="table">
　　　　<thead class="thead-dark">
　　　　　　<tr>
　　　　　　　　<th Prénom</th>
　　　　　　　　<th Nom de famille</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 Prénom</th>
　　　　　　　　<th Nom de famille</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>

Testez pour voir ‹/›

Smaller table

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

Example

<!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 Prénom</th>
　　　　　　　　<th Nom de famille</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>

Testez pour voir ‹/›

Responsive table

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

Example

<!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 will create a horizontal scrollbar if the visible area width is greater than　992px will display different effects (without scrollbar):</p>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　<div class="table-responsive">　　　　　　　　　　
　　<table class="table">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th #</th>
　　　　　　　　<th Prénom</th>
　　　　　　　　<th Nom de famille</th>
　　　　　　　　<th Âge</th>
　　　　　　　　<th Ville</th>
　　　　　　　　<th Pays</th>
　　　　　　　　<th Sexe</th>
　　　　　　　　<th>Exemple</th>
　　　　　　　　<th>Exemple</th>
　　　　　　　　<th>Exemple</th>
　　　　　　　　<th>Exemple</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>Femme</td>
　　　　　　　　<td>Oui</td>
　　　　　　　　<td>Oui</td>
　　　　　　　　<td>Oui</td>
　　　　　　　　<td>Oui</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
　　</div>
</div>
</body>
</html>

Testez pour voir ‹/›

You can specify the scrollbar to be displayed at a certain screen width using the following classes:

Class name	Screen width
.table-responsive-sm	< 576px
.table-responsive-md	< 768px
.table-responsive-lg	< 992px
.table-responsive-xl	< 1200px

Example

<!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 pour créer des tableaux réactifs, lorsque la largeur de l'écran est inférieure　576px à afficher la barre de défilement horizontale.</p>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　<p>Redéfinissez la taille du navigateur pour voir l'effet.</p>
　　<div class="table-responsive-sm">　　　　　　　　　　
　　<table class="table">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th #</th>
　　　　　　　　<th Prénom</th>
　　　　　　　　<th Nom de famille</th>
　　　　　　　　<th Âge</th>
　　　　　　　　<th Ville</th>
　　　　　　　　<th Pays</th>
　　　　　　　　<th Sexe</th>
　　　　　　　　<th>Exemple</th>
　　　　　　　　<th>Exemple</th>
　　　　　　　　<th>Exemple</th>
　　　　　　　　<th>Exemple</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>Femme</td>
　　　　　　　　<td>Oui</td>
　　　　　　　　<td>Oui</td>
　　　　　　　　<td>Oui</td>
　　　　　　　　<td>Oui</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
　　</div>
</div>
</body>
</html>

Testez pour voir ‹/›

Bootstrap4 Formes d'images Bootstrap4 Couleurs