Javascript 滚动表格（但不是thead）

我有一个（长）引导表，我想允许使用

overflow:auto滚动。我只希望
tbody
可以滚动，而不是
thead
内容

请看我的尝试。我试图在
t车身上设置高度，但未成功。
这可能对您的情况有所帮助：


我也尝试一下，它可以给你一个提示：

一行、一列和一个div，内有overflow:auto和一个固定高度，内有另一个表：

<tbody id="user-rows">
   <tr>
     <td>
        <div style="overflow:auto; height:10em; width:20em;">
          <table >
              <tr>
               .
               .
               . 
              </tr>
          </table>


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

更新的JSFIDLE:

标记：

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

标题上的滚动条用于保持宽度不变。您可以使用一些JavaScript来解决这个问题，但也应该有一些不错的JS/JQuery库，您可以找到它们来处理整个tbody滚动问题

如果要为表头列（th）和列（td）设置相同的宽度：

这将是一场激烈的胜利之战，除了bootstrap之外，这实际上很难实现，特别是跨浏览器。无论如何，这里已经讨论过很多次了，比如：。在谷歌上快速搜索将产生几个javascript解决方案，以及许多可能在大多数浏览器中都能工作的纯CSS解决方案。。。所有这些解决方案都不会像预期的那样干净。此解决方案的问题是宽度。TR的TD与TH的TD宽度不同。
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.scrollable {
    overflow-y: scroll;
}

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

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 */
}