40

How can we use Bootstrap to create <thead> with 2 levels (eg: Summer Period has hildren data1, data2, data3) and also table cells that merged 2 vertical cells (eg:State)?

Here's how it looks like in Excel:

enter image description here

1
  • 2
    using colspan="n" for each cell, that should then add up the parent row full span Jul 26, 2013 at 0:33

3 Answers 3

72

I'm not sure how exactly to do it with Bootstrap, but I know how to do it in HTML:


You can use a combination of the colspan and rowspan attributes, where rowspan is used for table headers spanning multiple rows, and the same applies to colspan and columns.

  1. Break up your table headers into rows, according to their levels.
    So the first table row will consist of your "parent" headers, i.e. the headers that every other header and piece of data is going to fall under.

  2. Your first row should have 3 columns: State, Utilities Company and Summer Period.

  3. Add subsequent header rows for each level you drill down. Here, your next row will simply be the table headers for each data set.


Let's apply the attributes:

  1. Your 1st th for State spans 2 rows, so we add rowspan="2".
  2. The same applies to the next table header, Utilities Company.
  3. Summer Period spans 1 row and 3 columns, so we add colspan="3"
  4. Add another tr in the header, containing the 3 cells for data1, data2 and data3.

The resulting HTML looks like this:

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

Here is a demo fiddle.

Here's an updated demo (actually reset as base) including bootstrap.css even though it literally does nothing demo fiddle updated.

2
  • 2
    Very to-the-point answer, but the formatting was kind of "uninviting". I gave it a make-over. Feel free to revert if you don't like it :)
    – gkalpak
    Apr 2, 2015 at 9:08
  • Your example doesn't even import Bootstrap css. This isn't the solution for those wanting Bootstrap's fluid grid.
    – NoBugs
    Jun 2, 2015 at 1:54
9

Creating a complex header with multiple lines in Bootstrap is exactly as it is in HTML. Here is your table in HTML for 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>

You may have to add some CSS between your first and second header row to display your data correctly

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>
1
  • 1
    You're answering the same answer as @albert, if you wish you can edit his answer, not create your own. Thanks! Mar 26, 2021 at 18:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.