我试图使一个表与固定标题和一个可滚动的内容使用引导3表。 不幸的是,我发现的解决方案不工作与bootstrap或混乱的风格。

这里有一个简单的bootstrap表,但由于某种原因,我不知道tbody的高度不是10px。

height: 10px !important; overflow: scroll;

例子:

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <table class="table table-striped"> <thead> <tr> <th>Make</th> <th>Model</th> <th>Color</th> <th>Year</th> </tr> </thead> <tbody style="height: 10px !important; overflow: scroll; "> <tr> <td class="filterable-cell">111 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>


当前回答

把表格像这样放在div里面,使表格垂直滚动。将overflow-y更改为overflow-x,使表可水平滚动。只是溢出使表可以水平和垂直滚动。

<div style="overflow-y: scroll;"> 
    <table>
    ...
    </table>
</div>

其他回答

清洁解决方案(仅适用于CSS)

.table-fixed tbody {
    display:block;
    height:85vh;
    overflow:auto;
}
.table-fixed thead, .table-fixed tbody tr {
    display:table;
    width:100%;
}


<table class="table table-striped table-fixed">
    <thead>
        <tr align="center">
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 1</td>
            <td>Content 1</td>
            <td>Content 1</td>
        </tr>
        <tr>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
        </tr>
    </tbody
</table

不需要用div包装它…

CSS:

tr {
width: 100%;
display: inline-table;
table-layout: fixed;
}

table{
 height:300px;              // <-- Select the height of the table
 display: block;
}
tbody{
  overflow-y: scroll;      
  height: 200px;            //  <-- Select the height of the body
  width: 100%;
  position: absolute;
}

Bootply: https://www.codeply.com/p/nkaQFc713a

既然“所有”浏览器都支持ES6,我已经将上面的各种建议合并到一个JavaScript类中,该类以表作为参数,并使主体可滚动。它让浏览器的布局引擎确定标题和主体单元格的宽度,然后使列的宽度相互匹配。

可以显式地设置表的高度,或者填充浏览器窗口的剩余部分,并提供事件的回调,如视口调整大小和/或细节元素打开或关闭。

多行标头支持是可用的,如果表使用WCAC指南中指定的id/headers属性作为可访问性,这是特别有效的,这并不像看起来那样是一个繁重的要求。

代码不依赖于任何库,但如果使用它们,则可以很好地使用它们。(在使用JQuery的页面上测试)。

代码和示例用法可以在Github上找到。

更新

对于更新的和仍然维护的库尝试jquery。而不是floatThead(正如Bob Jordan在评论中提到的)。

旧的答案

这是一个很古老的答案,下面提到的图书馆已经不再维护了。

我在GitHub上使用StickyTableHeaders,它像魅力一样工作!

我必须添加这个css,使头部不透明。

table#stickyHeader thead {
  border-top: none;
  border-bottom: none;
  background-color: #FFF;
}

根据@Roko C. Buljan的回答,如果你尝试添加行跨度,当你滚动时,只有第一个th会被固定。

.tableFixHead { overflow: auto; height: 100px; } .tableFixHead thead th { position: sticky; top: 0; z-index: 1; } /* Just common table stuff. Really. */ table { border-collapse: collapse; width: 100%; } th, td { padding: 8px 16px; } th { background:#eee; } <div class="tableFixHead"> <table> <thead> <tr> <th rowspan="3">TH 1</th> <th>TH 2.1</th> <th>TH 3.1</th> </tr> <tr > <th>TH 2.2</th> <th>TH 3.2</th> </tr> <tr > <th>TH 2.3</th> <th>TH 3.3</th> </tr> </thead> <tbody> <tr><td>A1</td><td>A2</td><td>A3</td></tr> <tr><td>B1</td><td>B2</td><td>B3</td></tr> <tr><td>C1</td><td>C2</td><td>C3</td></tr> <tr><td>D1</td><td>D2</td><td>D3</td></tr> <tr><td>E1</td><td>E2</td><td>E3</td></tr> </tbody> </table> </div>

如果你想固定行跨度,你可以添加这行

.tableFixHead thead tr:nth-child(2) th {
    top: 34px; /* change the number according to your need  */
}

.tableFixHead thead tr:nth-child(3) th {
    top: 68px; /* change the number according to your need  */
}

作为示例,您可以检查这个片段

.tableFixHead { overflow: auto; height: 200px; } .tableFixHead thead th { position: sticky; top: 0; z-index: 1; } .tableFixHead thead tr:nth-child(2) th { top: 34px; /* change the number according to your need */ } .tableFixHead thead tr:nth-child(3) th { top: 68px; /* change the number according to your need */ } /* Just common table stuff. Really. */ table { border-collapse: collapse; width: 100%; } th, td { padding: 8px 16px; } th { background:#eee; } <div class="tableFixHead"> <table> <thead> <tr> <th rowspan="3">TH 1</th> <th>TH 2.1</th> <th>TH 3.1</th> </tr> <tr > <th>TH 2.2</th> <th>TH 3.2</th> </tr> <tr > <th>TH 2.3</th> <th>TH 3.3</th> </tr> </thead> <tbody> <tr><td>A1</td><td>A2</td><td>A3</td></tr> <tr><td>B1</td><td>B2</td><td>B3</td></tr> <tr><td>C1</td><td>C2</td><td>C3</td></tr> <tr><td>D1</td><td>D2</td><td>D3</td></tr> <tr><td>E1</td><td>E2</td><td>E3</td></tr> </tbody> </table> </div>

如果你用n -child(number)手动指定number,上面的代码段将正常工作