3

でスクロールできるようにしたい (長い) Bootstrap テーブルがありoverflow: auto;ます。コンテンツtbodyではなく、スクロール可能にしたいだけです。thead

私の試みについては、このフィドルを参照してください。高さを設定しようとしましたが tbody失敗しました。

4

2 に答える 2

5

tbodyをスクロール可能に設定することはできません。2つの別々のテーブルを作成する必要があります。1つはヘッダー用、もう1つは本文用です。bodyテーブルをdivでラップし、overflow-yプロパティをscrollに設定します。

更新されたjsfiddle：http: //jsfiddle.net/SzGW3/37/

マークアップ：

<div class="scrollable">
    <table class="table table-hover table-striped">
        <thead>
            <tr>
                <th>User</th>
                <th>Rights</th>
                <th></th>
            </tr>
        </thead>
    </table>
</div>
<div class="bodycontainer scrollable">
    <table class="table table-hover table">
        <tbody id="user-rows">
            <tr class="user-row" style="opacity: 1;">
                <td>Justin</td>
                <td>Administrator</td>
                <td><span class="btn btn-mini btn-primary edit pull-right fade">Edit</span>
                </td>
            </tr>
            <tr class="user-row" style="opacity: 1;">
                <td>Sebastien</td>
                <td>Administrator</td>
                <td><span class="btn btn-mini btn-primary edit pull-right fade">Edit</span>
                </td>
            </tr>
            <tr class="user-row" style="opacity: 1;">
                <td>Steve</td>
                <td>Operator</td>
                <td><span class="btn btn-mini btn-primary edit pull-right fade">Edit</span>
                </td>
            </tr>
            <tr class="user-row" style="opacity: 1;">
                <td>Thomas</td>
                <td>Administrator</td>
                <td><span class="btn btn-mini btn-primary edit pull-right fade">Edit</span>
                </td>
            </tr>
            <tr class="user-row" style="opacity: 1;">
                <td>admin</td>
                <td>Administrator</td>
                <td><span class="btn btn-mini btn-primary edit pull-right fade">Edit</span>
                </td>
            </tr>
        </tbody>
    </table>
</div>

スタイル：

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.scrollable {
    overflow-y: scroll;
}

.bodycontainer {
    height: 100px !important;
    width: 100%;
}

ヘッダーのスクロールバーは、幅を同じに保つためのものです。これはJavaScriptで修正できますが、tbodyのスクロールの問題全体を処理するために見つけることができるいくつかの優れたJS/JQueryライブラリもあるはずです。

ヘッダーの列（th）と列（td）に同じ幅を設定する場合：

table thead>tr>th{
    width: 20% !important; /* 20% for 5, 25% for 4, etc */

}

table tbody>tr>td{
    width: 20% !important; /* 20% for 5, 25% for 4, etc */
}
于 2013-02-04T23:04:26.560 に答える
0

これはあなたの場合に役立つかもしれません：

http://www.novasoftware.com/download/jquery_fixedtable/jquery_fixedtable.aspx

また、私はあなたにヒントを与えることができるフィドルを試してみます：

1つの単一の行と列、およびオーバーフローのある内部のdiv：autoと固定の高さ、および内部の別のテーブル：

<tbody id="user-rows">
   <tr>
     <td>
        <div style="overflow:auto; height:10em; width:20em;">
          <table >
              <tr>
               .
               .
               . 
              </tr>
          </table>
于 2013-02-04T22:50:12.743 に答える