2016-07-29 8 views
0

最大サイズが200pxになるようにブートストラップテーブルを取得しようとしています。それ以上のものはスクロールします。Cantはサイズを変更するためにブートストラップテーブルを取得

私はに設定されたテーブルのCSSがありますテーブルはまだページの高さと幅であるしかし

<table class="table table-striped jSpeeds table-fixed"> 
    <thead> 
     <tr><th>Time</th><th>Speed</th></tr> 
    </thead> 
    <tbody> 
     <tr><td>TestRow</td><td>TestVal</td></tr> 
    </tbody> 
</table> 

table.jSpeeds tr:hover, table.jSpeeds tr td:hover{ 
    cursor:pointer; 
} 

table.table-fixed thead { 
    width: 97%; 
} 
table.table-fixed tbody { 
    height: 230px; 
    overflow-y: auto; 
    width: 100%; 
} 

& HTMLを。誰かが助けることができるかどうか疑問に思っていた。

Please see the JSBin example here

ありがとう。

答えて

4

ブートストラップのresponsive-tableを使用してください。 <table>をこれにラップします。ラッパーの高さを定義することができるように

<div class="table-responsive fix-table-height"> 
    // your table here 
</div> 

その後のラッパーで、クラスfix-table-heightを追加します。あなたの場合、200px;が必要です。だから、あなたがこれを行うことができます:

.fix-table-height{ 
    max-height:200px; 
} 

をこれは、明示的にTDのために追加する必要があり、出力jsFiddle

0

テーブルの本体と行の表示を変更してブロックする必要があります。このような何か:私は、堅牢なソリューションを提供するために挑戦されたので

table.jSpeeds tr:hover, table.jSpeeds tr td:hover{ 
    cursor:pointer; 
} 

table.table-fixed thead { 
    width: 100%; 
} 

table.table-fixed tbody { 
    height: 230px; 
    overflow-y: auto; 
} 

table.table-fixed tbody, 
table.table-fixed tr { 
    display: block; 
    width: 100%; 
} 

table.table-fixed th, 
table.table-fixed td { 
    width: 300px; 
} 

EDIT

を、ここに来るです:

table.jSpeeds tr:hover, table.jSpeeds tr td:hover{ 
    cursor:pointer; 
} 

table.table-fixed thead { 
    width: 100%; 
} 

table.table-fixed tbody { 
    height: 230px; 
    overflow-y: auto; 
} 

table.table-fixed tbody, 
table.table-fixed tr { 
    display: block; 
    width: 100%; 
} 

table.table-fixed th, 
table.table-fixed td { 
    display: block; 
    float: left; 
    width: 50%; 
} 

Gist Link

+0

です。これはロバストな解決策ではありません –

0

だけに、あなたのCSSを調整これは:

tbody { 
    display: block; 
    overflow: auto; 
    height: 230px; 
} 

tbody tr { 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
} 
+0

tbodyはテーブルの子として自動的にテーブルに与えられたwidthプロパティを取得します。この場合は100%;-)。 –

+0

試しましたか? –

+0

http://output.jsbin.com/kiqosat –

関連する問題