Html+css 设置Table tBody滚动条显示

废话不多说，直接上代码：

Css代码：

#table {
        width: 100%;
        text-align: left;
        margin-top: 2px;
    }

        #table > th, #table > td, #table > tr, #table > thead, #table > tbody {
            display: block;
        }//每个标签都模块化，这点很重要

            #table > tbody > tr > td:nth-child(3) {
                width: 280px;
                max-width: 279px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                float: left;
                text-align: left;
            }//对于列头和列都浮动
            #table > tbody > tr > td:nth-child(1) {
                width: 90px;
                float: left;
            }

            #table > tbody > tr > td:nth-child(2) {
                width: 155px;
                float: left;
            }

        #table > tbody {
            height: 165px;
            overflow-y: auto;
            overflow-x: hidden;
            padding-bottom: 5px;
            background-color: white;
            scrollbar-base-color: ghostwhite;
        }//tbody需要设置最大高度和滚动条


        #table > thead > tr {
            background-color: #337ab7;
            color: #f9f9f9;
        }

            #table > thead > tr > th:nth-child(1) {
                width: 80px;
                text-align: left;
            }

            #table > thead > tr > th:nth-child(2) {
                width: 176px;
                text-align: left;
            }

            #table > thead > tr > th:nth-child(3) {
                width: 316px;
                text-align: left;
            }

Html代码如下：

<table class="table table-hover" id="table">
<thead><tr>
<th scope="col">选择</th><th scope="col">模板名称</th><th scope="col">模板内容</th>
</tr></thead>
<tbody>
<tr>
<td><input type="CheckBox"></td>
<td title="123">123</td>
<td title="测试">测试</td>
</tr>
<tr>
<td><input type="CheckBox"></td>
<td title="321">321</td>
<td title="测试2">测试2</td>
</tr>
<tr>
<td><input type="CheckBox"></td>
<td title="321">321</td>
<td title="测试2">测试2</td>
</tr>
<tr>
<td><input type="CheckBox"></td>
<td title="321">321</td>
<td title="测试2">测试2</td></tr><tr><td><input type="CheckBox"></td><td title="321">321</td><td title="测试2">测试2</td</tr><tr><td><input type="CheckBox"></td><td title="321">321</td><td title="测试2">测试2</td</tr><tr><td><input type="CheckBox"></td><td title="321">321</td><td title="测试2">测试2</td</tr>
</tbody>
</table>

就能显示小果果了，如下：

这个滚动条列头是固定位置的，只有内容不封会有滚动条