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

Bootstrap4 Tutoriales básicos

Bootstrap4 tables

HTML tables are used to display data in a grid manner (such as rows and columns). Use Bootstrap4can quickly and easily greatly change the appearance of the table.

Bootstrap4 Basic table

Bootstrap4 Set the basic table style with .table class, as shown in the following examples:

<!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>Basic table</h2>
　　<p>.table class to set the basic table style:/p>　　　　　　　　　　　　
　　<table class="table">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Nombre</th>
　　　　　　　　<th>Apellido</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>
Prueba aquí ‹/›

Striped table

By adding .table-The striped class, you will see <tbody> You can see stripes on the rows inside, as shown in the following 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>Striped table</h2>
　　<p>By adding　.table-The striped class, to set striped tables:/p>　　　　　　　　　　　　
　　<table class="table table-striped">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Nombre</th>
　　　　　　　　<th>Apellido</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>
Prueba aquí ‹/›

Table with border

.table-The bordered class can add a border to the table

<!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>Table with border</h2>
　　<p>.table-The bordered class can add a border to the table: </p>　　　　　　　　　　　　
　　<table class="table table-bordered">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Nombre</th>
　　　　　　　　<th>Apellido</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>
Prueba aquí ‹/›

Mouse-over state table

.table-The hover class can add a mouse-over effect to each row of the table (gray background):

<!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>Mouse-over state table</h2>
　　<p>.table-The hover class can add a mouse-over effect to each row of the table (gray background): </p>　　　　　　　　　　　　
　　<table class="table table-hover">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Nombre</th>
　　　　　　　　<th>Apellido</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>
Prueba aquí ‹/›

Black background table

.table-The dark class can add a black background to the table:

<!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>Black background table</h2>
　　<p>.table-The dark class can add a black background to the table: </p>　　　　　　　　　　　　
　　<table class="table table-dark">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Nombre</th>
　　　　　　　　<th>Apellido</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>
Prueba aquí ‹/›

Black striped table

Combined use of .table-dark and .table-The striped class can create a black striped table:

<!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>Black striped table</h2>
　　<p>Combined use of　.table-dark　and　.table-The striped class can create a black striped table: </p>　　　　　　　　　　　　
　　<table class="table table-dark　table-striped">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Nombre</th>
　　　　　　　　<th>Apellido</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>
Prueba aquí ‹/›

Mouse-over effect - Black background table

Combined use of .table-dark and .table-The hover class can set the mouse-over effect for a black background table:

<!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>Mouse-over effect　-　Black background table</h2>
　　<p>Combined use of　.table-dark　and　.table-The hover class can set the mouse-over effect for a black background table: </p>　　　　　　　　　　　　
　　<table class="table table-dark　table-hover">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Nombre</th>
　　　　　　　　<th>Apellido</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>
Prueba aquí ‹/›

Color class with specified meaning

Al especificar una clase de color significativa, se puede establecer el color de las filas o celdas de la tabla:

<!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>Especificar una clase de color significativa</h2>
　　<p>Al especificar una clase de color significativa, se puede establecer el color de las filas o celdas de la tabla:</p>　　　　　　　　　　　　
　　<table class="table">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Nombre</th>
　　　　　　　　<th>Apellido</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-text dark-dark">
　　　　　　　　<td>Dark</td>
　　　　　　　　<td>Bo</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
Prueba aquí ‹/›

La siguiente tabla enumera las descripciones de las clases de color de la tabla:

Class nameDescripción
.table-primaryAzul: Indica que esta es una acción importante
.table-successVerde: Indica que esta es una acción permitida
.table-dangerRojo: Indica que esta es una acción peligrosa
.table-infoAzul claro: Indica que el contenido ha cambiado
.table-warningNaranja: Indica una acción que requiere atención
.table-activeGris: Se utiliza para efectos de hover del ratón
.table-secondaryGris: Indica que el contenido no es muy importante
.table-lightGris claro, puede ser el fondo de las filas de la tabla
.table-darkGris oscuro, puede ser el fondo de las filas de la tabla

Color de encabezado

En Bootstrap v4.0.0-beta.2 en.thead-La clase "dark" se utiliza para agregar un fondo negro a los encabezados de la tabla, .thead-La clase "light" se utiliza para agregar un fondo gris a los encabezados de la tabla:

En Bootstrap v4.0.0-beta Esta versión de, .thead-La clase "inverse" se utiliza para agregar un fondo negro a los encabezados de la tabla, .thead-La clase "default" se utiliza para agregar un fondo gris a los encabezados de la tabla.

<!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>Color de encabezado</h2>
　　<p>.thead-La clase "dark" se utiliza para agregar un fondo negro a los encabezados de la tabla, .thead-La clase "light" se utiliza para agregar un fondo gris a los encabezados de la tabla:</p>　　　　　　　　　　　　
　　<table class="table">
　　　　<thead class="thead-dark">
　　　　　　<tr>
　　　　　　　　<th>Nombre</th>
　　　　　　　　<th>Apellido</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>Nombre</th>
　　　　　　　　<th>Apellido</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>
Prueba aquí ‹/›

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>Nombre</th>
　　　　　　　　<th>Apellido</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>
Prueba aquí ‹/›

Responsive table

.table-responsive class is used to create responsive tables: at screen width 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>Table responsive</h2>
　　<p>.table-responsive class is used to create responsive tables: at screen width 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>Nombre</th>
　　　　　　　　<th>Apellido</th>
　　　　　　　　<th>Edad</th>
　　　　　　　　<th>Ciudad</th>
　　　　　　　　<th>País</th>
　　　　　　　　<th>Sexo</th>
　　　　　　　　<th>Ejemplo</th>
　　　　　　　　<th>Ejemplo</th>
　　　　　　　　<th>Ejemplo</th>
　　　　　　　　<th>Ejemplo</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td><1</td>
　　　　　　　　<td>Anna</td>
　　　　　　　　<td>Pitt</td>
　　　　　　　　<td><35</td>
　　　　　　　　<td>Nueva York</td>
　　　　　　　　<td>USA</td>
　　　　　　　　<td>Femenino</td>
　　　　　　　　<td>Yes</td>
　　　　　　　　<td>Yes</td>
　　　　　　　　<td>Yes</td>
　　　　　　　　<td>Yes</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
　　</div>
</div>
</body>
</html>
Prueba aquí ‹/›

You can use the following classes to set a scrollbar to display at a specified screen width:

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>Table responsive</h2>
　　<p>.table-responsive-sm clase se utiliza para crear tablas responsivas, en el ancho de pantalla menor　576px cuando se muestra la barra de desplazamiento horizontal. </p>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　<p> Cambia el tamaño del navegador para ver los efectos. </p>
　　<div class="table-responsive-sm">　　　　　　　　　　
　　<table class="table">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>#</th>
　　　　　　　　<th>Nombre</th>
　　　　　　　　<th>Apellido</th>
　　　　　　　　<th>Edad</th>
　　　　　　　　<th>Ciudad</th>
　　　　　　　　<th>País</th>
　　　　　　　　<th>Sexo</th>
　　　　　　　　<th>Ejemplo</th>
　　　　　　　　<th>Ejemplo</th>
　　　　　　　　<th>Ejemplo</th>
　　　　　　　　<th>Ejemplo</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td><1</td>
　　　　　　　　<td>Anna</td>
　　　　　　　　<td>Pitt</td>
　　　　　　　　<td><35</td>
　　　　　　　　<td>Nueva York</td>
　　　　　　　　<td>USA</td>
　　　　　　　　<td>Femenino</td>
　　　　　　　　<td>Yes</td>
　　　　　　　　<td>Yes</td>
　　　　　　　　<td>Yes</td>
　　　　　　　　<td>Yes</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
　　</div>
</div>
</body>
</html>
Prueba aquí ‹/›
Bootstrap4 Formas de imágenesBootstrap4 Colores