Границы вокруг ячеек

В SIMAI Framework с помощью модифкаторов можно контролировать, должны ли границы таблицы сворачисваться или разделяться.

Классы

Класс Значение
border-collapse border-collapse: collapse;
border-separate border-collapse: separate;

Описание

Адаптивный модификатор. Задает тип границ Таблицы в зависимости от размера области просмотра.

Использование модификатора: {контрольная точка}:{модификатор}

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • border-collapse - объединяет границы смежных ячеек в единую границу.
    • border-separate - каждая ячейка отображает свои границы.

Объединение границ

Используйте модификатор border-collapse чтобы объединить границы смежных ячеек в единую границу.

Штат Город
Индиана Индианаполис
Огайо Колумбус
Мичиган Детройт 
<table class="border-collapse w-full bg-surface-0 shadow-2 border-1 border-surface-lowest m-bottom-0">
    <thead>
        <tr>
            <th class="w-1/2 p-1 left border-1 border-surface-lowest">Штат</th>
            <th class="w-1/2 p-1 left border-1 border-surface-lowest">Город</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="p-4 border-1 border-surface-lowest">Индиана</td>
            <td class="p-4 border-1 border-surface-lowest">Индианаполис</td>
        </tr>
        <tr>
            <td class="p-4 border-1 border-surface-lowest">Огайо</td>
            <td class="p-4 border-1 border-surface-lowest">Колумбус</td>
        </tr>
        <tr>
            <td class="p-4 border-1 border-surface-lowest">Мичиган</td>
            <td class="p-4 border-1 border-surface-lowest">Детройт</td>
        </tr>
    </tbody>
</table>

Разделение границ

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

Штат Город
Индиана Индианаполис
Огайо Колумбус
Мичиган Детройт 
<table class="border-separate w-full bg-surface-0 shadow-2 border-1 border-surface-lowest m-bottom-0">
    <thead>
        <tr>
            <th class="w-1/2 p-1 left border-1 border-surface-lowest">Штат</th>
            <th class="w-1/2 p-1 left border-1 border-surface-lowest">Город</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="p-4 border-1 border-surface-lowest">Индиана</td>
            <td class="p-4 border-1 border-surface-lowest">Индианаполис</td>
        </tr>
        <tr>
            <td class="p-4 border-1 border-surface-lowest">Огайо</td>
            <td class="p-4 border-1 border-surface-lowest">Колумбус</td>
        </tr>
        <tr>
            <td class="p-4 border-1 border-surface-lowest">Мичиган</td>
            <td class="p-4 border-1 border-surface-lowest">Детройт</td>
        </tr>
    </tbody>
</table>

Адаптивность

Для установки толщины кольца, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к модификатору.

Например, используйте модификатор md:border-collapse чтобы объединить гарницы таблицы для экранов размером Medium и больше. 

<div class="md:border-collapse ..."></div>

Для получения дополнительной информации об адаптивности в SIMAI Framework ознакомьтесь с документацией.

Изменить статью