CSS-стили для таблиц

Набор CSS-стилей для разных вариантов стилизации HTML-таблиц через CSS-классы с примерами их использования.

Таблица HTML 5

Структура таблицы в HTML:

<table>
    <caption>Заголовок таблицы</caption>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

Атрибуты:

• rowspan - объединение рядов ячеек
• colspan - объединение колонок ячеек

Стили для таблиц

Набор данных стилей позволить нам легко управлять внешним видом таблиц:

:root {
    --table-color: #212529;
    --table-bg-striped: rgba(0, 0, 0, 0.05);
    --table-bg-hover: rgba(0, 0, 0, 0.075);
}
table {
    caption-side: bottom;
    border-collapse: collapse;
}
caption {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    color: #6c757d;
    text-align: left;
}
th {
    text-align: inherit;
    text-align: -webkit-match-parent;
}
thead, tbody, tfoot, tr, td, th {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
}
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: var(--table-color);
    vertical-align: top;
    border-color: #dee2e6;
}
.table > :not(caption) > * > * {
    padding: 0.5rem 0.5rem;
    background-color: transparent;
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px transparent;
}
.table > tbody {
    vertical-align: inherit;
}
.table > thead {
    vertical-align: bottom;
}
.table-group-divider {
    border-top: 2px solid currentcolor;
}
.caption-top {
    caption-side: top;
}
.table-sm > :not(caption) > * > * {
    padding: 0.25rem 0.25rem;
}
.table-bordered > :not(caption) > * {
    border-width: 1px 0;
}
.table-bordered > :not(caption) > * > * {
    border-width: 0 1px;
}
.table-borderless > :not(caption) > * > * {
    border-bottom-width: 0;
}
.table-borderless > :not(:first-child) {
    border-top-width: 0;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--table-bg-striped);
    color: var(--table-color);
}
.table-striped-columns > :not(caption) > tr > :nth-child(2n) {
    background-color: var(--table-bg-striped);
    color: var(--table-color);
}
.table-active {
    background-color: rgba(0, 0, 0, 0.1);
    color: var(--table-color);
}
.table-hover > tbody > tr:hover > * {
    background-color: var(--table-bg-hover);
    color: var(--table-color);
}
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

Примеры стилизации таблиц

Таблица на всю ширину

<table class="table">
  ...
</table>

Таблица с границами

<table class="table table-bordered">
  ...
</table>

Таблица без бордера

<table class="table table-borderless">
  ...
</table>

Таблица с полосатыми рядами

<table class="table table-striped">
  ...
</table>

Таблица с полосатыми столбцами

<table class="table table-striped-columns">
  ...
</table>

Наводимые ряды

<table class="table table-hover">
  ...
</table>

Заголовок таблицы сверху

<table class="table caption-top">
    <caption>Заголовок таблицы</caption>
    <thead>
        ...
    </thead>
    <tbody>
        ...
    </tbody>
</table>

Адаптивные таблицы (Таблица с прокруткой)

Адаптивные таблицы позволяют с легкостью прокручивать таблицы по горизонтали. Сделайте любую таблицу отзывчивой во всех окнах просмотра, обернув тег <table></table> div с классом .table-responsive.

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Стили лайфхаки

:first-child :last-child :last-of-type :first-of-type

Все кроме первого столбца

tr > :not(:first-child) {
    text-align: center;
}

По порядковому номеру

Первая, третья и четвёртая ячейки:

.table tbody td:nth-child(1),
.table tbody td:nth-child(3),
.table tbody td:nth-child(4) {
  text-align: center;
}