Question

编程和第一次在此发布的新内容。

我在面板中的引导程序表遇到了一些问题。我有一个下拉菜单，用户可以决定显示哪些列。我需要能够在添加更多数据时垂直和水平滚动表格内容。没有滚动条就可以正常工作，因为bootstrap可以解决这个问题。当我将我的桌子设置为＆＃34;显示：block＆＃34;我的滚动条工作正常，但现在列标题不再适合排列。此外，当我添加更多列进行显示时，不是添加到顶部标题行，而是创建第二行。在这里，我希望它将内容集中在一起，但仍允许每列占用所需的空间，当表格宽度超过它时，我希望内容也能水平滚动。我的问题是我的数据会根据用户选择的数据（项目ID，摘要，描述等）而变化，因此我无法设置单个列。

这是我的表格代码：

http://pastebin.com/e6qLwYqx

这是我的css表：

http://pastebin.com/cFFj6Haw

非常感谢有人能帮我解决这个问题，我已经坚持了好几天。

Answer 1

使用

.table{
overflow:scroll ;

}

有时您可以使用!important覆盖任何更新

来覆盖您的引导类

Answer 2

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

bootstrap固定表头与滚动体

2 个答案: