滚动表(但不是thead)

Question

我有一个(长)Bootstrap表,我想允许滚动overflow: auto;.我只想要tbody可滚动,而不是thead内容.

我的尝试请看这个小提琴.我试图设置一个tbody不成功的高度 .

Answer 1

您不能将tbody设置为可滚动.您需要创建两个单独的表 - 一个用于标题,一个用于正文.将body表包装在div中并设置overflow-y属性以进行滚动.

更新了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解决这个问题,但是你也应该找到一些很好的JS/JQuery库来处理整个tbody滚动问题.

如果要为标题cols(th)和cols(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 */
}