Bootstrap table fixed header colspan not working

Question

I have a bootstrap table which has fixed header. It is working fine.

When I add colspan in table. Table gets collapsed.

Is there any other possibility to achieve both fixed header and table colspan

Thanks in Advance

DEMO : FIDDLE

CSS

.table-fixed thead {
   width: 97%;
}
.table-fixed tbody {
  height: 230px;
  overflow-y: auto;
  width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td,               .table-fixed th {
   display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
  float: left;
  border-bottom-width: 0;
}

OUTPUT :

Answer 1

In order to use colspan on cells maintaining the full width, you have to change the td class, to maintain the bootstrap's 12 column layout.

For example, you can replace this:

<tr>
    <td class="col-xs-2">1</td>
    <td class="col-xs-8">Mike Adams</td>
    <td class="col-xs-2">23</td>
</tr>

with this:

<tr>
    <td class="col-xs-2">1</td>
    <td colspan="2" class="col-xs-10">Mike Adams</td>
    <!--<td class="col-xs-2">23</td>-->
</tr>

So, the <td class="col-xs-8"> mark-up becomes <td colspan="2" class="col-xs-10">, in order to maintain the 12 column layout.

JSFiddle