L'entête fixe de la table de Bootstrap ne fonctionne pas

Question

J'ai une table de bootstrap qui a un en-tête fixe. Cela fonctionne bien.

Lorsque j'ajoute colspan dans le tableau. La table est effondrée.

est-il une autre possibilité d'obtenir à la fois fixed header et une table colspan

Merci à l'avance

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

SORTIE:

Answer 1

Pour utiliser colspan sur les cellules en maintenant la pleine largeur, vous devez changer la classe td, pour maintenir la disposition 12 de la colonne du bootstrap.

Par exemple, vous pouvez remplacer:

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

avec ceci:

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

Ainsi, la majoration <td class="col-xs-8"> devient <td colspan="2" class="col-xs-10">, afin de maintenir la mise en page 12 de la colonne.

JSFiddle