带有滚动正文的引导固定表头

Posted 2023-03-05

【中文标题】带有滚动正文的引导固定表头

【英文标题】：bootstrap fixed table headers with scrolling body

【发布时间】：2015-11-30 06:16:19

【问题描述】：

编程新手，也是第一次在这里发帖。

我在面板中的引导表有点问题。我有一个下拉菜单，用户可以在其中决定要显示哪些列。随着更多数据的添加，我需要能够垂直和水平滚动表格内容。这在没有滚动条的情况下工作正常，因为引导程序为我解决了这个问题。当我将表格设置为“显示：阻止”时，我的滚动条工作正常，但现在列标题不再排列得很好。 此外，当我添加更多要显示的列时，它们不会添加到顶部标题行，而是创建第二行。 在这里，我希望它将内容推送到一起，但仍然允许每列占用所需的空间，并且当表格宽度超过它的限制时，我希望内容也可以水平滚动。 我的问题是我的数据会根据用户选择的数据（项目 ID、摘要、描述等）而变化，因此我无法设置单个列。

这是我的表格代码：

http://pastebin.com/e6qLwYqx

这是我的表格 css：

http://pastebin.com/cFFj6Haw

如果有人能帮我解决这个问题，我将不胜感激，我已经坚持了好几天了。

【问题讨论】：

简而言之，你想用滚动<tbody> 固定<thead> 吗？

可以，但我还需要能够添加和删除列。

“寻求调试帮助的问题（“为什么这段代码不起作用？”）必须在问题中包含所需的行为、特定问题或错误以及重现它所需的最短代码本身。”不要链接到pastebin，把代码放在这里。最好在一个 sn-p 中，以便演示是实时的。

【参考方案1】：

来自here的参考。

查看此Question 以获取其他解决方案。

这是可行的解决方案

HTML

<table class="table table-striped">
    <thead>
    <tr>
        <th>Make</th>
        <th>Model</th>
        <th>Color</th>
        <th>Year</th>
    </tr>
    </thead>
    <tbody>
    <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>

CSS

table 
        width: 100%;
    

thead, tbody, tr, td, th  display: block; 

tr:after 
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;


thead th 
    height: 30px;

    /*text-align: left;*/


tbody 
    height: 120px;
    overflow-y: auto;


thead 
    /* fallback */



tbody td, thead th 
    width: 19.2%;
    float: left;

链接到jsfiddle

【参考方案2】：

使用

.table
overflow:scroll ;

有时您可以使用!important 覆盖您的引导类进行任何更新