Bootstrap 5 Вложение таблиц

Bootstrap 5 Вложение таблиц используется для создания таблицы внутри таблицы. Вложенность — важная функция, которая используется во всех элементах, особенно в листинге.

Bootstrap 5 Класс вложения таблиц: класса для вложения таблиц не существует, мы просто помним одну вещь — ширину вложенной таблицы таблицы, которую можно определить с помощью атрибута td colspan.

Синтаксис:

<table class="table ...">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="..">
        <table class="table">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Пример 1. В этом примере мы создадим вложенную таблицу, в которой основная таблица содержит 3 строки, а одна из строк будет содержать другую таблицу, чтобы сделать эту таблицу вложенной.

Выход:

Пример 2: В этом примере мы добавим стиль к внешней таблице, чтобы убедиться, что стиль внешней таблицы не может достичь вложенной таблицы.

Вывод: как мы видим, класс striped-table не влияет на внутреннюю таблицу.

Ссылка: https://getbootstrap.com/docs/5.0/content/tables/#nesting