Таблицы в Bootstrap 4
1- Базовая таблица
Table (Таблица) это один из компонентов, который широко используется на веб странице. Чтобы использовать таблицу в Bootstrap 4 вам просто нужно применить класс .table для тегов (tag) <table>, и некоторые дополнительные классы для создания, оформления таблицы по желанию.Примените класс .table для <table> вы получите саму базовую таблицу в стиле Bootstrap. Изображение ниже покажет вам разницу между таблицей по умолчанию и таблицей применяющей класс .table:Класс .table настраивает ширину 100% и прозрачный фоновый цвет (transparent) для таблицы и padding для ячеек (cell),
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Table</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Basic Bootstrap Table</h2>
<table class="table">
<thead>
<tr>
<th>No</th>
<th>Language</th>
<th>Percent</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Java</td>
<td>14.21%</td>
</tr>
<tr>
<td>2</td>
<td>C</td>
<td>11.03%</td>
</tr>
<tr>
<td>3</td>
<td>C++</td>
<td>5.60%</td>
</tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Класс .table применяет прозрачный фоновый цвет (transparent) для таблицы, но если вы хотите другой цвет фона, то можете использовать следующие некоторые готовые классы:- .table-primary
- .table-secondary
- .table-success
- .table-danger
- .table-warning
- .table-info
- .table-light
- .table-dark
- .table-muted
- .table-white
2- Header Color - Цвет заголовка
Вы можете настроить цвет для Header таблицы используя класс .thead-dark или .thead-light для тега <thead>:<table class="table">
<thead class="thead-dark">
<tr>
<th>No</th>
<th>Language</th>
<th>Percent</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Java</td>
<td>14.21%</td>
</tr>
<tr>
<td>2</td>
<td>C</td>
<td>11.03%</td>
</tr>
<tr>
<td>3</td>
<td>C++</td>
<td>5.60%</td>
</tr>
</tbody>
</table>
Помимо этого, чтобы настроить цвет для Header таблицы, вы так же можете использовать классы ниже:
- .table-primary
- .table-secondary
- .table-success
- .table-danger
- .table-warning
- .table-info
- .table-light
- .table-dark
- .table-muted
- .table-white
3- Cell Color - Цвет ячеек
Вы можете применить цвет к отдельным строкам или ячейкам с помощью контекстных классов Bootstrap 4:- .table-primary
- .table-secondary
- .table-success
- .table-danger
- .table-warning
- .table-info
- .table-light
- .table-dark
- .table-muted
- .table-white
<table class="table">
<thead>
<tr>
<th>No</th>
<th>Language</th>
<th class="table-primary">Percent</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="table-success">Java</td>
<td>14.21%</td>
</tr>
<tr>
<td>2</td>
<td>C</td>
<td>11.03%</td>
</tr>
<tr>
<td>3</td>
<td>C++</td>
<td class="table-warning">5.60%</td>
</tr>
</tbody>
</table>
4- Striped Table - Полосатая таблица
Используя класс .table-striped вы можете создать таблицы с полосками (Striped table), это означает четные и нечетные строки в <tbody> будут иметь разные фоновые цвета, это помогает пользователю легче ориентироваться.<table class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>Language</th>
<th>Percent</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Java</td>
<td>14.21%</td>
</tr>
<tr>
<td>2</td>
<td>C</td>
<td>11.03%</td>
</tr>
<tr>
<td>3</td>
<td>C++</td>
<td>5.60%</td>
</tr>
</tbody>
</table>
Вы так же можете применить класс .table-dark сделав таблицу темного цвета
<table class="table table-striped table-dark">
<thead>
<tr>
<th>No</th>
<th>Language</th>
<th>Percent</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Java</td>
<td>14.21%</td>
</tr>
<tr>
<td>2</td>
<td>C</td>
<td>11.03%</td>
</tr>
<tr>
<td>3</td>
<td>C++</td>
<td>5.60%</td>
</tr>
</tbody>
</table>
5- Bordered Table - Таблица с обрамлением
Для границ по всей таблице используйте класс .table-borded (оставляя при этом класс .table на месте).<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Language</th>
<th>Percent</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Java</td>
<td>14.21%</td>
</tr>
<tr>
<td>2</td>
<td>C</td>
<td>11.03%</td>
</tr>
<tr>
<td>3</td>
<td>C++</td>
<td>5.60%</td>
</tr>
</tbody>
</table>
Так же вы можете сочетать с классом полосатой таблицы .table .table-bordered .table-striped
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th>Language</th>
<th>Percent</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Java</td>
<td>14.21%</td>
</tr>
<tr>
<td>2</td>
<td>C</td>
<td>11.03%</td>
</tr>
<tr>
<td>3</td>
<td>C++</td>
<td>5.60%</td>
</tr>
</tbody>
</table>
6- Borderless Table - Таблица без обрамления
Класс .table-borderless помогает вам создать таблицу баз границ (border), стороны таблицы не будут иметь границ, так же как и все ячейки (cell).<table class="table table-borderless">
<thead>
<tr>
<th>No</th>
<th>Language</th>
<th>Percent</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Java</td>
<td>14.21%</td>
</tr>
<tr>
<td>2</td>
<td>C</td>
<td>11.03%</td>
</tr>
<tr>
<td>3</td>
<td>C++</td>
<td>5.60%</td>
</tr>
</tbody>
</table>
Используйте .table-borderless + .table-dark чтобы создать таблицу баз границ, с темным фоновым цветом.
<table class="table table-borderless table-dark">
<thead>
<tr>
<th>No</th>
<th>Language</th>
<th>Percent</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Java</td>
<td>14.21%</td>
</tr>
<tr>
<td>2</td>
<td>C</td>
<td>11.03%</td>
</tr>
<tr>
<td>3</td>
<td>C++</td>
<td>5.60%</td>
</tr>
</tbody>
</table>
7- Hoverable rows - Эффект наведения в строках
Класс .table-hover помогает вам создать эффект (effect) изменения фонового цвета когда курсор (pointer) передвигается на строках (row) таблицы (Выделяются только строки в <tbody>). Данный эффект можно посмотреть на изображение ниже:<table class="table table-hover">
<thead>
<tr>
<th>No</th>
<th>Language</th>
<th>Percent</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Java</td>
<td>14.21%</td>
</tr>
<tr>
<td>2</td>
<td>C</td>
<td>11.03%</td>
</tr>
<tr>
<td>3</td>
<td>C++</td>
<td>5.60%</td>
</tr>
</tbody>
</table>
{banner_google}
8- Table .table-sm - Сжатые таблицы
Bootstrap настраивает padding для ячеек таблицы, данное значение по-умолчанию является 0.75rem, если вам нужна таблица поменьше, используйте класс .table-sm, данный класс уменьшает значение padding наполовину. Ниже на изображение показаны таблица не использующей класс .table-sm и таблица использующей .table-sm.<table class="table table-bordered table-sm">
<thead>
<tr>
<th>No</th>
<th>Language</th>
<th>Percent</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Java</td>
<td>14.21%</td>
</tr>
<tr>
<td>2</td>
<td>C</td>
<td>11.03%</td>
</tr>
<tr>
<td>3</td>
<td>C++</td>
<td>5.60%</td>
</tr>
</tbody>
</table>
9- Responsive Table - Адаптивная таблица
Очень сложно создать таблицу подходящую устройствам с разными ширинами экрана. При меньшей ширине устройства, таблица старается уменьшить свою ширину. На самом деле столбцы не могут уменьшить свою ширину к 0. И когда таблица не может больше уменьшиться в ширине, появится горизонтальная прокрутка (scroll bar) на браузере.Решение у Bootstrap это использовать тег <div class="table-responsive[-sm|-md|-lg|-xl]"> обернуть (wrap) таблицу, появится горизонтальная прокрутка (scroll bar) на теге <div>, если таблица не может еще больше уменьшиться в ширине. Таким образом горизонтальная прокрутка появится на теге <div> вместо того, чтобы появиться в браузере.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Table</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h4>Responsive Table:</h4>
<div class="table-responsive-sm">
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Language</th>
<th>Language Description</th>
<th>First Release</th>
<th>Author</th>
<th>Percent</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Java</td>
<td>Java is a programming language and computing platform...
</td>
<td>1995</td>
<td>James Gosling</td>
<td>14.21%</td>
</tr>
</tbody>
</table>
</div>
<h3>Other Language</h3>
<ul>
<li>Go Language</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Css Класс | Описание |
.table-responsive | Если таблица не может более уменьшиться в ширине, появится горизонтальная прокрутка. |
.table-responsive-sm | Если ширина устройства (или браузера) меньше 567px и таблица не может более уменьшиться в ширине, появится горизонтальная прокрутка. |
.table-responsive-md | Если ширина устройства (или браузера) меньше 768px и таблица не может более уменьшиться в ширине, появится горизонтальная прокрутка. |
.table-responsive-lg | Если ширина устройства (или браузера) меньше 992px и таблица не может более уменьшиться в ширине, появится горизонтальная прокрутка. |
.table-responsive-xl | Если ширина устройства (или браузера) меньше 1200px и таблица не может более уменьшиться в ширине, появится горизонтальная прокрутка. |
10- Размер столбца
Для Google, я нашел некоторые решения для настройки ширины столбцов в таблице в Bootstrap. Но после проверки я думаю есть решения хорошо работающие с Firefox но не работает с Chrome. Ниже я привел некоторые примеры и решения, которые считаю лучшими:Пример 1:
Таблица имеет 3 столбца. Первый столбец имеет ширину 10%, второй имеет ширину 70%, третий имеет ширину 20%.- Решение: Используйте style ="width: X%".
<table class="table table-bordered">
<thead>
<tr>
<th style="width: 10%">No</th>
<th style="width: 70%">Language</th>
<th style="width: 20%">Percent</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Java</td>
<td>14.21%</td>
</tr>
<tr>
<td>2</td>
<td>C</td>
<td>11.03%</td>
</tr>
<tr>
<td>3</td>
<td>C++</td>
<td>5.60%</td>
</tr>
</tbody>
</table>
Пример 2:
У вас есть таблица с 3-мя столбцами, и вы хотите:Для устройств с шириной >= 567px | 3 столбца будут иметь соотношение ширины: 1:9:2 |
Для устройств с шириной < 567px | 3 столбца будут иметь соотношение ширины: 3:3:6 |
<table class="table table-bordered">
<thead>
<tr class="d-flex">
<th class="col-3 col-sm-1">No</th>
<th class="col-3 col-sm-9">Language</th>
<th class="col-6 col-sm-2">Percent</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-3 col-sm-1">1</td>
<td class="col-3 col-sm-9">Java</td>
<td class="col-6 col-sm-2">14.21%</td>
</tr>
<tr class="d-flex">
<td class="col-3 col-sm-1">2</td>
<td class="col-3 col-sm-9">C</td>
<td class="col-6 col-sm-2">11.03%</td>
</tr>
</tbody>
</table>
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Облако тегов
bootstrap Bootstrap css CSS CSS3 DLE dle fruit farm html html шаблон html5 HTML5 Payeer PNG PSD wap Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг меню модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
Как задать ширину 100 пикселей в CSS