Bootstrap table with different heads

HTML-CSS
1

Can someone suggest me how to do the below sample with bootstrap table?
image
Thanks

2

You can use the colspan attribute to change the width of a cell. The default value is 1.

So you could do something like this:

<table class="table table-bordered text-center">
  <thead class="thead-dark">
    <tr>
      <th colspan="2">App 1</th>
      <th colspan="3">App 2</th>
    </tr>
  </thead>
  <thead class="thead-light">
    <tr>
      <th>Code</th>
      <th>Label</th>
      <th>Code</th>
      <th>Label</th>
      <th>Critic</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>label 1</td>
      <td>A1</td>
      <td>LA 1</td>
      <td>K</td>
    </tr>
    <tr>
      <td>1</td>
      <td>label 1</td>
      <td>A2</td>
      <td>LA 2</td>
      <td>K</td>
    </tr>
  </tbody>
</table>

Columns also expand/contract automatically in Bootstrap to fit the content. For more examples, see https://getbootstrap.com/docs/4.3/content/tables/.

1 Like
3

thanks a lot.
when i search i found colspan finally like your code… before i didn’t use it . It is useful

4

Glad to hear it works for you. I just updated my post because I realised I had made a mess of the <thead> and <tbody> tags.