Границы таблицы

Класс table-border добавляет таблице вертикальные линии между колонками и рамку по краям: строки получают границу сверху и снизу, ячейки — слева и справа. Берите его для плотных таблиц с данными, где колонки нужно разделить.

Пример

Слева таблица с классом table: только горизонтальные линии под строками. Справа добавлен table-border: рамка у каждой ячейки.

<div class="grid grid-col-1 md:grid-col-2 gap-4">
  <div class="flex flex-col gap-1">
    <table class="table 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</code>
  </div>
  <div class="flex flex-col gap-1">
    <table class="table table-border 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-border</code>
  </div>
</div>

Классы

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

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

Переменные

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

Применение

Класс ставят на элемент table вместе с table, который задаёт цвет линий и отступы ячеек:

<table class="table table-border">
  <thead>…</thead>
  <tbody>…</tbody>
</table>

Линии берут цвет --sf-table-border-color из класса table — по умолчанию роль outline-variant. Чтобы перекрасить линии одной таблицы, задайте эту переменную на ней.

Ограничения

• Рамка складывается из границ строк и ячеек и видна целиком только при объединённых границах — режиме по умолчанию у таблиц на странице с классом table. С border-separate границы строк не рисуются.
• Класс действует на прямых потомков: thead, tbody, tfoot и их строки. Подпись caption рамку не получает.
• Префиксов ширины экрана и состояния нет.

См. также

• Параметры по умолчанию для таблиц
• Границы и интервалы таблицы