Чередование строк и столбцов

Класс table-stripe закрашивает нечётные строки тела таблицы, table-stripe-col — чётные столбцы. Берите их для длинных и широких таблиц, где взгляд легко перескакивает на соседний ряд.

Пример

Слева полосы по строкам, справа — по столбцам.

HTML

<div class="grid grid-col-1 md:grid-col-2 gap-4">
  <div class="flex flex-col gap-1">
    <table class="table table-stripe m-bottom-0">
      <thead>
        <tr><th>Город</th><th>Страна</th><th>Код</th></tr>
      </thead>
      <tbody>
        <tr><td>Москва</td><td>Россия</td><td>RU</td></tr>
        <tr><td>Берлин</td><td>Германия</td><td>DE</td></tr>
        <tr><td>Мадрид</td><td>Испания</td><td>ES</td></tr>
        <tr><td>Рим</td><td>Италия</td><td>IT</td></tr>
      </tbody>
    </table>
    <code class="text-1/2 color-on-surface-variant">table table-stripe</code>
  </div>
  <div class="flex flex-col gap-1">
    <table class="table table-stripe-col m-bottom-0">
      <thead>
        <tr><th>Город</th><th>Страна</th><th>Код</th></tr>
      </thead>
      <tbody>
        <tr><td>Москва</td><td>Россия</td><td>RU</td></tr>
        <tr><td>Берлин</td><td>Германия</td><td>DE</td></tr>
        <tr><td>Мадрид</td><td>Испания</td><td>ES</td></tr>
        <tr><td>Рим</td><td>Италия</td><td>IT</td></tr>
      </tbody>
    </table>
    <code class="text-1/2 color-on-surface-variant">table table-stripe-col</code>
  </div>
</div>

Классы

Класс	CSS	Значения
`table-stripe` (`.table-stripe > tbody > tr:nth-of-type(odd) > *`)	`--sf-table-accent-bg: var(--sf-table-stripe-bg); color: var(--sf-table-stripe-color)`	—
`table-stripe-col` (`.table-stripe-col > :not(caption) > tr > :nth-child(2n)`)	`--sf-table-accent-bg: var(--sf-table-stripe-bg); color: var(--sf-table-stripe-color)`	—

Условия (что это): ширина экрана — нет; состояния — нет.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Переменные

Классы читают эти токены темы. Изменённый токен меняет все места, где он используется, — классы, компоненты и тему; задайте его в теме проекта, а не на отдельном элементе. Все токены — на странице Все токены.

Переменная	Значение по умолчанию
`--sf-table-stripe-bg`	задаётся темой
`--sf-table-stripe-color`	задаётся темой

Применение

Классы ставят на таблицу вместе с table: фон ячейки рисует table, а полосы меняют его переменную.

HTML

<table class="table table-stripe">…</table>

Класс	Что закрашено
`table-stripe`	1-я, 3-я, 5-я … строки `tbody`; шапка — нет
`table-stripe-col`	2-й, 4-й … столбцы во всех строках, включая шапку

Цвет полосы — переменная --sf-table-stripe-bg, по умолчанию var(--sf-surface-transparent-select); цвет текста в полосе — --sf-table-stripe-color. Полупрозрачный фон читается на любой поверхности и в обеих темах.

Ограничения

Полосы перекрывают table-active на строке и совпадают с ним по цвету; см. Активные строки и ячейки.
Счёт строк идёт внутри каждого tbody заново.
Префиксов ширины экрана и состояния нет.

Навигация

Главное

Документация

Содержание