Question

如何在http://portal.blackbox-tracking.com/reports/table.html {{3}}垂直滚动的同时保持水平滚动和＆＃34;蓝色＆＃34;边界？另外，我想让table＆＃34;修复＆＃34;。（因为它的代码太多而无法直接发布，所以给出了类似的内容）

Answer 1

看看固定标题的小提琴和身体上的滚动。希望这可以满足任务..谢谢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;
        }

Answer 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设置为具有所需的边框。

Answer 3

这是您正在寻找的 Fiddle ，在#timeline CSS属性中进行了少量更改。

固定垂直可滚动列

3 个答案: