固定垂直可滚动列答案

【问题标题】：Fixed vertical scrollable column固定垂直可滚动列
【发布时间】：2017-11-24 06:00:46
【问题描述】：

如何使tablehttp://portal.blackbox-tracking.com/reports/table.html 的table 可以垂直滚动，同时保持水平滚动和“蓝色”边框？另外，我想让<thead>“固定”。（因为代码太多，直接发个赞）

【问题讨论】：

标签： html css scroll html-table

【解决方案1】：

查看 fiddle 的固定标题和正文滚动。希望这能满足任务.. 谢谢http://jsfiddle.net/T9Bhm/8/

HTML：

<table class="table table-striped mainhelloo">
    <thead class="waah">
    <tr>
        <th>Make</th>
        <th>Model</th>
        <th>Color</th>
        <th>Year</th>
    </tr>
    </thead>
    <tbody class="helloo">
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
            <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
     <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    </tbody>

</table>

CSS：

.mainhelloo thead, tbody, tr, td, th {
     display: block; 
}
.mainhelloo tr:after {
            content: ' ';
            display: block;
            visibility: hidden;
            clear: both;
        }


        .helloo {
            height: 120px;
            overflow-y: auto;
        }

        .waah{
            width: 100%;
        }


        .mainhelloo td, .mainhelloo th {
            width: 25%;
            float: left;
        }

【讨论】：

【解决方案2】：

我发现您通常仍需要支持的旧版浏览器（IE7、IE8）不支持针对此问题的纯 CSS 解决方案。以下 jQuery 插件允许我为一些成功的商业项目创建具有固定标题、排序等的复杂可滚动表：

https://datatables.net/examples/basic_init/scroll_y.html

https://datatables.net/examples/basic_init/scroll_xy.html

您仍然可以根据需要设置表格样式，包括边框。如果您想要一个包含整个表格（标题、正文和所有表格）的蓝色边框，那么我建议将表格放在容器 DIV 中，并为该 DIV 设置样式以具有您想要的边框，同时从表格本身移除外边框。

【讨论】：

【解决方案3】：

这就是你要找的Fiddle，对#timeline CSS 属性做了一些改动。

【讨论】：