Создание границ внутри borderless таблиц Bootstrap и Angular JS

Быстрый ответ

Для создания минималистичной таблицы в Bootstrap воспользуйтесь классами table и borderless:

<table class="table borderless">
  <!-- содержимое таблицы -->
</table>

Приведенный выше код послужит для отображения таблицы без полос и окружающих границ.

Создание таблицы без границ

Теперь проведем преобразование стандартной таблицы, полностью убрав из неё границы и линии:

Чистый вид: таблица без границ

Соединение класса .table-borderless с небольшим объемом собственного CSS позволит получить идеально чистую, практически незаметную таблицу:

<table class="table table-borderless">
  <!-- содержимое таблицы -->
</table>

/* Как будто границы и не было вовсе */
.borderless td, .borderless th {
  border: none;
}

Подробнее об этом расскажет наш спикер на видео

Отображение внутренних границ: оставляем без изменений только внешние

Если вы хотите сохранить внутренние разделительные линии, то вы можете избавиться от внешних границ, используя CSS:

/* Таблица без внешних границ — это почти как nachos без сыра. Это все ещё nachos, но вкусно ли все так же? */
.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th {
  border-bottom-width: 0;
}

Горизонтальные разделители: отключаем класс .table

Для тех, кто предпочитает в таблицах только горизонтальные линии:

<table class="borderless">
  <!-- содержимое таблицы -->
</table>

Стилизация таблиц в Angular

При работе с Angular необходимо обеспечить правильное применение стилей:

<!-- Присвойте таблице уникальный класс -->
<table class="my-borderless-table">
  <!-- содержимое таблицы -->
</table>

/* В Angular компоненты ценят уникальность */
:host ::ng-deep .my-borderless-table td,
:host ::ng-deep .my-borderless-table th {
  border: none;
}

Обратите внимание: работа с вложенными таблицами может оказаться столь сложной, как сложность матрёшки, и может привести к неожиданным стилистическим трудностям.

Визуализация

Ниже представлена таблица, демонстрирующая вид таблицы Bootstrap без полос и границ:

| Оформление       | Опции таблицы Bootstrap       |
| ------------------- | ---------------------------- |
| Основа (🍽️)        | Базовая структура таблицы     |
| Без украшений (➖)   | Отсутствие полос (`.table-striped`) |
| Без лишних деталей (🚫🔲) | Без границ (`.table-bordered`)  |

Удалив несущественные детали, вы получите чистый и минималистичный дизайн таблицы.

До: [🍽️🧂🍷] → Стол накрыт со всей посудой и украшениями
После:  [🍽️]     → Простая подача без излишеств, фокусирующая внимание на основном блюде

Специфика селекторов и исполнение стиля

Специфичность CSS-селекторов

Приступайте к изучению специфических особенностей CSS-селекторов отсюда. Когда стили конфликтуют:

/* Нацеливаемся на ячейки тела таблицы, исключая ячейки заголовка. */
.table-borderless > tbody > tr > td

Избегайте чрезмерного использования прямых дочерних селекторов (>), так, как будто бы вы добавляете соус к картошке фри, но не к пасте.

Согласованность стиля: порядок имеет значение

Консистентность стилей обеспечивает симметричность:

/* Строгость и порядок, как после уборки по методу Мари Кондо */
.table-borderless > *, .table-borderless > * > * {
  border: none;
}

Соблюдая эти правила, стиль вашей таблицы будет так же последовательным, как и ваша ежедневная рутина с кофе (понедельник: черный, вторник: черный...)

Полезные материалы

1. Tables · Bootstrap — Официальное руководство по стилю таблиц Bootstrap.
2. Newest 'bootstrap-table' Questions – Stack Overflow — Вопросы и ответы сообщества о работе с таблицами Bootstrap.
3. Styling tables – Learn web development | MDN — Советы от MDN о стилизации таблиц, написанные настоящим профессионалом.
4. Bootstrap 4 Tables – W3Schools — Пошаговое обучение использованию таблиц Bootstrap.
5. A Complete Guide to the Table Element | CSS-Tricks – CSS-Tricks — Исчерпывающее руководство по элементу таблицы.
6. Bootstrap 5 Striped, Responsive Tables and More – Tutorial Republic — Подробное ознакомление с полосатыми, адаптивными таблицами Bootstrap и другими функциями.
7. GitHub – wenzhixin/bootstrap-table — Продвинутые навыки по таблицам Bootstrap с поддержкой расширенной интеграции.