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

Question

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

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

Answer 1

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

---

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

1. Разбейте столбики в строках в соответствии с их уровнями.
   Итак, первая строка таблицы будет состоять из ваших «родительских» заголовков, то есть заголовков, в которые попадут все остальные заголовки и фрагменты данных.

2. Ваш первый ряд должен иметь 3 столбца: State, Utilities Company и Summer Period.

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

---

Давайте применять атрибуты:

1. Ваш первый th для государственный охватывает 2 строки, поэтому мы добавим rowspan="2".
2. То же самое касается следующего заголовка таблицы, Коммунальные услуги.
3. Летний Период охватывает 1 строку и 3 колонки, поэтому мы добавим colspan="3"
4. Добавить еще tr в заголовке, содержащий 3 клетки для data1, 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> 

---

Вот demo fiddle.

Вот обновленная демоверсия (фактически сброшенная как базовая), включая bootstrap.css, хотя она буквально ничего не делает demo fiddle updated.

Answer 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 между первой и второй строке заголовка, чтобы отобразить ваши данные правильно

Answer 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>