Подтвердить что ты не робот

Создание объединенных ячеек таблицы с помощью Twitter Bootstrap

Как мы можем использовать Bootstrap для создания <thead> с двумя уровнями (например: Летний период имеет данные о личностях1, data2, data3), а также ячейки таблицы, которые объединили две вертикальные ячейки (например: состояние)?

Вот как это выглядит в Excel:

Ответ 1

Я не уверен, как это сделать с помощью Bootstrap, но я знаю, как это сделать в HTML:

Вы можете использовать комбинацию атрибутов colspan и rowspan, где rowspan используется для заголовков таблиц, охватывающих несколько строк , и то же самое относится к colspan и столбцы.

Разбивайте заголовки таблиц в строки в соответствии с их уровнями.
Итак, первая строка таблицы будет состоять из ваших "родительских" заголовков, т.е. Заголовков, в которые попадет каждый другой заголовок и фрагмент данных.
В первой строке должно быть 3 столбца: State, Utilities Company и Summer Period.
Добавьте последующие строки заголовков для каждого уровня, который вы развернете. Здесь следующая строка будет просто заголовком таблицы для каждого набора данных.

Пусть применяются атрибуты:

Ваш первый th для состояния охватывает 2 строки, поэтому мы добавляем rowspan="2".
То же самое относится к заголовку следующей таблицы, Utilities Company.
Летний период охватывает 1 строку и 3 столбца, поэтому мы добавляем colspan="3"
Добавьте еще один tr в заголовок, содержащий 3 ячейки для данных1, data2 и data3.

Полученный HTML выглядит следующим образом:

<thead>
  <tr>
    <th rowspan="2">State</th>
    <th rowspan="2">Utilities Company</th>
    <th colspan="3">Summer Period</th>
  </tr>
  <tr>
    <th>data1</th>
    <th>data2</th>
    <th>data3</th>
  </tr>
</thead>

Вот демонстрационная скрипта.

Здесь обновленная демонстрация (фактически reset в качестве базы), включая bootstrap.css, хотя она буквально ничего не делает демонстрационная скрипка обновлена .

Ответ 2

Создание сложного заголовка с несколькими строками в Bootstrap точно так же, как в HTML. Вот ваша таблица в HTML для Bootstrap:

<table class="table table-bordered">
  <thread>
    <tr>
      <th>State</th>
      <th>Utilities Company</th>
      <th colspan="3">Summer Period</th>
    </tr>
    <tr>
      <th></th>
      <th></th>
      <th>data1</th>
      <th>data2</th>
      <th>data3</th>
    </tr>
  </thread>
  <tbody>
    ... data here ...
  </tbody>
</table>

Вам может потребоваться добавить CSS между вашей первой и второй строкой заголовка, чтобы правильно отображать ваши данные.

Ответ 3

<table class="table table-bordered">
  <thread>
    <tr>
      <th rowspan="2">State</th>
      <th rowspan="2">Utilities Company</th>
      <th colspan="3">Summer Period</th>
    </tr>
    <tr>
      <th>data1</th>
      <th>data2</th>
      <th>data3</th>
    </tr>
  </thread>
  <tbody>
    ... data here ...
  </tbody>
</table>