Creazione di celle di tabelle unite tramite Twitter Bootstrap

Question

Come utilizzare Bootstrap per creare <thead> con 2 livelli (ad esempio: Summer Period ha i dati hildren1, data2, data3) e anche celle di tabella che uniscono 2 celle verticali (ad esempio: Stato)?

Ecco come si presenta come in Excel:

Answer 1

Non sono sicuro di come esattamente per farlo con Bootstrap, ma so come farlo in HTML:

---

È possibile utilizzare una combinazione degli attributi colspan e rowspan, dove rowspan viene utilizzato per intestazioni di tabella che si estendono su più righe e lo stesso vale per colspan e colonne.

1. Suddividere le intestazioni delle tabelle in righe, in base al loro livello.
   Quindi la prima riga della tabella consisterà delle intestazioni "padre", cioè le intestazioni a cui ogni altra intestazione e parte di dati sta per cadere.

2. La prima riga deve avere 3 colonne: State, Utilities Company e Summer Period.

3. Aggiungi le successive righe di intestazione per ogni livello di drill down. Qui, la tua riga successiva sarà semplicemente l'intestazione della tabella per ciascun set di dati.

---

Proviamo ad applicare gli attributi:

1. Il vostro primo th per Stato estende 2 righe, quindi aggiungiamo rowspan="2".
2. Lo stesso vale per l'intestazione della tabella successiva, Utilities Company.
3. Estate Periodo estende 1 fila e 3 colonne, quindi si aggiunge colspan="3"
4. Aggiungere un'altra tr nell'intestazione, contenente le celle 3 di data1, data2 e dati3.

Il codice HTML risultante è simile al seguente:

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

---

Ecco un demo fiddle.

Ecco una demo aggiornata (in realtà ripristinata come base) incluso bootstrap.css anche se letteralmente non fa nulla demo fiddle updated.

Answer 2

La creazione di un'intestazione complessa con più righe in Bootstrap è esattamente come in HTML. Qui è la vostra tabella in HTML per 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> 

Potrebbe essere necessario aggiungere un po 'di CSS tra la prima e la seconda riga di intestazione per visualizzare i dati correttamente

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>