2017-01-21 12 views
2

固定ヘッダーを持つブートストラップテーブルがあります。それは正常に動作しています。ブートストラップテーブル固定ヘッダーの列スパンが機能しない

私はcolspanを表に追加します。テーブルが折りたたまれます。

アドバンス

DEMOでfixed headerとテーブルcolspan

両方のおかげで達成するために、他の可能性がある: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:

enter image description here

答えて

2

全幅を維持する細胞にCOLSPAN使用するためには、ブートストラップの12列のレイアウトを維持するために、TDクラスを変更する必要があります。例えば

、あなたがこの置き換えることができます。これに

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

:だから

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

を、<td class="col-xs-8">マークアップは、12列のレイアウトを維持するために、<td colspan="2" class="col-xs-10">になります。

JSFiddle

関連する問題