0

Bootstrap.overflow を非表示にして、Bootstrap を使用して固定テーブル セルを作成するにはどうすればよいですか? 私はこれを試しましたが、データは垂直に下に向かっています:

table {
  table-layout: fixed;
}
table th,
table td {
  overflow: hidden;
}

私はこのような10列とスタイルを持っています:

<table class="table table-bordered">
    <thead class="mbhead">
        <tr class="mbrow">
            <th style="width:10px"></th>
            <th style="width:10%;">A</th>
            <th style="width:10%;">B</th>
            <th style="width:10%;">C</th>
            <th style="width:10%;">D</th>
            <th style="width:10%;">E</th>
            <th style="width:10%;">F</th>
            <th style="width:10%;">G</th>
            <th style="width:10%;">H</th>
            <th style="width:10%;">I</th>
            <th style="width:10%;">J</th>
        </tr>
    </thead>
    <tbody>
        //other contents...
        </body>
</table>
4

3 に答える 3

0

overflow: hidden はブロック レベルの要素でのみ機能するため、TH 要素と TD 要素を display: block にするか、(おそらくより良い) div をそれらに設定することができます。

TD/TH に設定された display: block を示す例を次に示します: http://jsfiddle.net/YB4yU/

th, td {
    overflow: hidden;
    width: 100px;
    height: 50px;
    display: block;
}
于 2013-03-01T09:17:29.310 に答える
0

これがあなたが望むものかどうかを確認してください。divを使用しました。それが役立つかどうか教えてください。2 つの div を使用したことがわかります。最初のdivで、オーバーフロー非表示に設定しました

<div  style="overflow: hidden; margin-left: 20px; height: 504px;">

このdiv内で別のdivを使用しました

 <div id="product"  style="overflow: auto;height: 350px;">

フィドルへのリンクはこちら

于 2013-03-01T08:13:45.433 に答える
0

css プロパティの空白を「nowrap」に設定する必要があります。

table th, table td { overflow: hidden; white-space: nowrap }
于 2014-02-06T16:59:24.523 に答える