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

Bootstrap4 базовый учебник

Таблицы Bootstrap4

HTML-таблицы используются для отображения данных в виде сетки (например, строки и столбцы). Используя Bootstrap4, можно быстро и легко значительно изменить外观 таблицы.

Bootstrap4 базовые таблицы

Bootstrap4 использует класс .table для установки стиля базовых таблиц, примеры приведены ниже:

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</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>Базовые таблицы</h2>
　　<p>Класс .table используется для установки стиля базовых таблиц:</p>　　　　　　　　　　　　
　　<table class="table">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Имя</th>
　　　　　　　　<th>Фамилия</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>
Проверьте, пожалуйста ‹/›

Полосатые таблицы

Добавление класса .table-striped позволяет увидеть полосы в <tbody> Внутренние строки видны с полосами, как показано в следующем примере:

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</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>Полосатые таблицы</h2>
　　<p>Добавление класса .table-striped позволяет создать полосатые таблицы:</p>　　　　　　　　　　　　
　　<table class="table table-striped">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Имя</th>
　　　　　　　　<th>Фамилия</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>
Проверьте, пожалуйста ‹/›

Таблицы с рамкой

Класс .table-bordered позволяет добавить рамку к таблице

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</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>Таблицы с рамкой</h2>
　　<p>Класс .table-bordered позволяет добавить рамку к таблице:</p>　　　　　　　　　　　　
　　<table class="table table-bordered">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Имя</th>
　　　　　　　　<th>Фамилия</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>
Проверьте, пожалуйста ‹/›

Таблицы с эффектом наведения мыши

Класс .table-hover позволяет добавить эффект наведения мыши ко всем строкам таблицы (серый фон):

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</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>Таблицы с эффектом наведения мыши</h2>
　　<p>Класс .table-hover позволяет добавить эффект наведения мыши ко всем строкам таблицы (серый фон):</p>　　　　　　　　　　　　
　　<table class="table table-hover">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Имя</th>
　　　　　　　　<th>Фамилия</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>
Проверьте, пожалуйста ‹/›

Таблицы с черным фоном

Класс .table-dark позволяет добавить черный фон к таблице:

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</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>Таблицы с черным фоном</h2>
　　<p>Класс .table-dark позволяет добавить черный фон к таблице:</p>　　　　　　　　　　　　
　　<table class="table table-dark">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Имя</th>
　　　　　　　　<th>Фамилия</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>
Проверьте, пожалуйста ‹/›

Черные полосатые таблицы

Совместное использование классов .table-dark и .table-striped позволяет создать черные полосатые таблицы:

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</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>Черные полосатые таблицы</h2>
　　<p>Совместное использование классов .table-dark и .table-striped позволяет создать черные полосатые таблицы:</p>　　　　　　　　　　　　
　　<table class="table table-dark table-striped">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Имя</th>
　　　　　　　　<th>Фамилия</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>
Проверьте, пожалуйста ‹/›

Эффект наведения мыши - таблицы с черным фоном

Использование классов .table-dark и .table-hover позволяет установить эффект наведения мыши на таблицы с черным фоном:

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</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>Эффект наведения мыши - таблица с чёрным фоном</h2>　　　　　　　　　　　　
　　<p>Совместное использование классов .table-dark и .table-hover позволяет установить эффект наведения мыши на таблицу с чёрным фоном:</p>
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Имя</th>
　　　　　　　　<th>Фамилия</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>
Проверьте, пожалуйста ‹/›

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

Классы цветов с意义上

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</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>Классы цветов с意义上</h2>　　　　　　　　　　　　
　　<table class="table">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Имя</th>
　　　　　　　　<th>Фамилия</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<p>С помощью указания класса цвета с意义上 можно установить цвет строк или ячеек таблицы:</p>
　　　　　　　　<td>Default</td>
　　　　　　　　<td>Defaultson</td>
　　　　　　</tr>　　　　　　
　　　　　　<td>[email protected]</td>
　　　　　　　　<tr class="table-primary">
　　　　　　　　<td>Основной</td>
　　　　　　　　<td>Joe</td>
　　　　　　</tr>
　　　　　　<td>[email protected]</td>
　　　　　　　　<tr class="table-success">
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<td>Успех</td>
　　　　　　　　<tr class="table-danger">
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<td>Опасность</td>
　　　　　　　　<tr class="table-info">
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr class="table-warning">
　　　　　　　　<td>Предупреждение</td>
　　　　　　　　<td>Refs</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr class="table-active">
　　　　　　　　<td>Активный</td>
　　　　　　　　<td>Activeson</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr class="table-secondary">
　　　　　　　　<td>Вторичный</td>
　　　　　　　　<td>Secondson</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr class="table-light">
　　　　　　　　<td>Светлый</td>
　　　　　　　　<td>Angie</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr class="table-dark text-dark">
　　　　　　　　<td>Тёмный</td>
　　　　　　　　<td>Bo</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
Проверьте, пожалуйста ‹/›

В таблице ниже приведены пояснения к классам цветов таблицы:

Имя классаОписание
.table-primaryСиний: означает, что это важное действие
.table-successЗеленый: означает, что это разрешенное действие
.table-dangerКрасный: означает, что это опасное действие
.table-infoСветло-голубой: означает, что контент был изменен
.table-warningОранжевый: означает, что需要注意的操作
.table-activeСерый: используется для эффекта наведения мыши
.table-secondaryСерый: означает, что контент не так важен
.table-lightСветло-серый, может быть фоном для строк таблицы
.table-darkТемно-серый, может быть фоном для строк таблицы

Цвет заголовков

В версии Bootstrap v4.0.0-beta.2 .thead-dark класс используется для добавления черного фона в заголовки таблицы, .thead-light класс используется для добавления серого фона:

В версии Bootstrap v4.0.0-beta .thead-inverse класс используется для добавления черного фона в заголовки таблицы, .thead-default класс используется для добавления серого фона.

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</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>Цвет заголовков</h2>
　　<p>.thead-dark класс используется для добавления черного фона в заголовки таблицы, .thead-light класс используется для добавления серого фона:</p>　　　　　　　　　　　　
　　<table class="table">
　　　　<thead class="thead-dark">
　　　　　　<tr>
　　　　　　　　<th>Имя</th>
　　　　　　　　<th>Фамилия</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>Имя</th>
　　　　　　　　<th>Фамилия</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>
Проверьте, пожалуйста ‹/›

Маленькие таблицы

.table-sm класс используется для уменьшения внутреннего отступа для создания较小的 таблиц:

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</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>Маленькие таблицы</h2>
　　<p>.table-sm класс используется для уменьшения внутреннего отступа для создания较小的 таблиц:</p>　　　　　　　　　　　　
　　<table class="table table-bordered table-sm">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Имя</th>
　　　　　　　　<th>Фамилия</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>
Проверьте, пожалуйста ‹/›

Адаптивные таблицы

.table-responsive класс используется для создания адаптивных таблиц: при ширине экрана менее 992px создается горизонтальная полоса прокрутки, если ширина видимой области больше 992px, то отображается другой эффект (без полосы прокрутки):

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</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>Адаптивные таблицы</h2>
　　<p>Класс .table-responsive используется для создания адаптивных таблиц: при ширине экрана менее 992px создается горизонтальная полоса прокрутки, если ширина可视ой области больше 992px, то отображается другой эффект (без полосы прокрутки):</p>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　<div class="table-responsive">　　　　　　　　　　
　　<table class="table">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th№</th>
　　　　　　　　<th>Имя</th>
　　　　　　　　<th>Фамилия</th>
　　　　　　　　<th>Возраст</th>
　　　　　　　　<th>Город</th>
　　　　　　　　<th>Страна</th>
　　　　　　　　<th>Пол</th>
　　　　　　　　<th>Пример</th>
　　　　　　　　<th>Пример</th>
　　　　　　　　<th>Пример</th>
　　　　　　　　<th>Пример</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>1</td>
　　　　　　　　<td>Anna</td>
　　　　　　　　<td>Pitt</td>
　　　　　　　　<td>35</td>
　　　　　　　　<td>Нью-Йорк</td>
　　　　　　　　<td>США</td>
　　　　　　　　<td>Женский</td>
　　　　　　　　<td>Да</td>
　　　　　　　　<td>Да</td>
　　　　　　　　<td>Да</td>
　　　　　　　　<td>Да</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
　　</div>
</div>
</body>
</html>
Проверьте, пожалуйста ‹/›

Вы можете определить отображение полосы прокрутки на указанной ширине экрана с помощью следующих классов:

Имя классаШирина экрана
.table-responsive-sm< 576px
.table-responsive-md< 768px
.table-responsive-lg< 992px
.table-responsive-xl< 1200px
<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</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>Адаптивные таблицы</h2>
　　<p>Класс .table-responsive-sm используется для создания адаптивных таблиц, при ширине экрана менее 576px отображается горизонтальная полоса прокрутки.</p>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　<p>Измените размер браузера, чтобы увидеть эффект.</p>
　　<div class="table-responsive-sm">　　　　　　　　　　
　　<table class="table">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th№</th>
　　　　　　　　<th>Имя</th>
　　　　　　　　<th>Фамилия</th>
　　　　　　　　<th>Возраст</th>
　　　　　　　　<th>Город</th>
　　　　　　　　<th>Страна</th>
　　　　　　　　<th>Пол</th>
　　　　　　　　<th>Пример</th>
　　　　　　　　<th>Пример</th>
　　　　　　　　<th>Пример</th>
　　　　　　　　<th>Пример</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>1</td>
　　　　　　　　<td>Anna</td>
　　　　　　　　<td>Pitt</td>
　　　　　　　　<td>35</td>
　　　　　　　　<td>Нью-Йорк</td>
　　　　　　　　<td>США</td>
　　　　　　　　<td>Женский</td>
　　　　　　　　<td>Да</td>
　　　　　　　　<td>Да</td>
　　　　　　　　<td>Да</td>
　　　　　　　　<td>Да</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
　　</div>
</div>
</body>
</html>
Проверьте, пожалуйста ‹/›
Формы изображений Bootstrap4Цвета Bootstrap4