Tworzenie scalonych komórek tabeli przy użyciu Twitter Bootstrap

Question

W jaki sposób możemy użyć Bootstrap do stworzenia <thead> z 2 poziomami (np .: okres letni ma dane hildren1, dane2, dane3), a także komórki tabeli, które połączyły 2 komórki pionowe (np .: stan)?

Oto jak to wygląda w programie Excel:

Answer 1

Nie jestem pewien, jak dokładnie to zrobić z Bootstrap, ale wiem, jak to zrobić w HTML:

---

Można użyć kombinacji atrybutów colspan i rowspan, gdzie rowspan jest używany do nagłówków tabel obejmujących wiele wierszy, a to samo dotyczy colspan i kolumn.

1. Rozbijaj nagłówki tabeli na wiersze, zgodnie z ich poziomami.
   Tak więc pierwszy wiersz tabeli będzie składał się z nagłówków "nadrzędnych", tj. Nagłówków, w których każdy inny nagłówek i część danych będzie się mieścił.

2. Twój pierwszy wiersz powinien mieć 3 kolumny: State, Utilities Company i Summer Period.

3. Dodaj kolejne wiersze nagłówka dla każdego poziomu, który ma zostać pominięty. Tutaj następny wiersz będzie po prostu nagłówkiem tabeli dla każdego zestawu danych.

---

Zastosujmy atrybuty:

1. 1st th dla State obejmuje 2 rzędy, więc dodamy rowspan="2".
2. To samo dotyczy nagłówka następnego stołu, Utilities Company.
3. letni okres obejmuje 1 wiersz i 3 kolumny, więc dodamy colspan="3"
4. Dodaj kolejny tr w nagłówku, zawierająca 3 komórek na danych1, danych2 i danych3.

Powstały HTML wygląda następująco:

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

---

Oto demo fiddle.

Oto zaktualizowana wersja demonstracyjna (faktycznie zresetowana jako baza), w tym bootstrap.css, mimo że dosłownie nie robi nic, demo fiddle updated.

Answer 2

Tworzenie złożonego nagłówka z wieloma liniami w Bootstrap jest dokładnie takie, jak w HTML. Oto tabela w HTML dla 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> 

Być może trzeba będzie dodać trochę CSS pomiędzy pierwszym i drugim wiersz nagłówka, aby wyświetlić dane poprawnie

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>