Html 如何：仅 100% 高度表滚动 tbody
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4534200/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How To: 100% Height Table only Scroll tbody
提问by Matt
is it possible to scroll the content of a 100% height table and not the header using CSS and only showing the scroll bar to the side of the tbody content and not the header row? Thanks!
是否可以使用 CSS 滚动 100% 高度表的内容而不是标题，并且只将滚动条显示在 tbody 内容的一侧而不是标题行？谢谢！
回答by sg3s
Tables are tricky business. I guess you want to use them for semantic and fallback purposes, but they're somewhat unflexible.
桌子是一件棘手的事情。我猜您想将它们用于语义和后备目的，但它们有点不灵活。
Luckily some already figured out not one, but 2 good methods of achieving scrollable effects.... in ~2005.
幸运的是，在 2005 年左右，有些人已经找到了实现可滚动效果的不是一种方法，而是 2 种很好的方法。
http://www.cssplay.co.uk/menu/tablescroll.html
http://www.cssplay.co.uk/menu/tablescroll.html
They still need extra html markup to make it possible and the second table effectively uses a nested table, but the fallback / plain HTML looks like a normal plain table.
他们仍然需要额外的 html 标记以使其成为可能，并且第二个表格有效地使用了嵌套表格，但回退/纯 HTML 看起来像一个普通的纯表格。
Method #1
方法#1
Outer div with padding, to create a 'field' for the elements. Inner div which makes the inner table scrollable. The theadtable row is absolutely positioned to make it stay on top of the body, same is done with the footer. Because the inner div is overflow: autoand a height defined the rest of the table rows fall inline in the scollable area.
带有填充的外部 div，为元素创建一个“字段”。使内表可滚动的内部 div。该thead表行绝对定位，使其留在机身顶部，同样与页脚完成。因为内部 div 是overflow: auto定义的高度，所以表格行的其余部分在可缩放区域内内联。
Method #2
方法#2
The outer table is a normal table, header and footer are styled normally. But the tbody of the outer table contains only one row, one column and in it it has another table. This column has a height defined and overflow: autoso the able in it (which only has the content) will be scrolled inside it.
外部表格是普通表格，页眉和页脚样式正常。但是外部表的 tbody 仅包含一行，一列，并且其中有另一个表。该列定义了高度，overflow: auto因此其中的能力（只有内容）将在其中滚动。
回答by gengns
I hope it's not too late and you are still alive, things have improved a lot since then :)
我希望现在还为时不晚，您还活着，从那时起情况已经有了很大改善:)
You can use:
您可以使用：
table {
display: inline-grid;
grid-template-areas:
"head-fixed"
"body-scrollable";
}
thead {
grid-area: head-fixed;
}
tbody {
grid-area: body-scrollable;
overflow: auto;
height: calc(100vh - 55px);
}
Scrollable table (tbody) with 100% height and fixed header on JSFiddle: http://jsfiddle.net/gengns/p3fzdc5f/
在 JSFiddle 上具有 100% 高度和固定标题的可滚动表 (tbody)：http: //jsfiddle.net/gengns/p3fzdc5f/
回答by GlennG
A javascript solution is to use 'floating headers'. You put the whole table in a div with overflow set, then the JavaScript will clone the table header and put it at the top of the div, a bit like an Apple interface.
javascript 解决方案是使用“浮动标题”。你把整个表格放在一个设置了溢出的 div 中，然后 JavaScript 会克隆表格标题并将它放在 div 的顶部，有点像苹果的界面。
A jQuery example is http://fixedheadertable.com/
一个 jQuery 示例是http://fixedheadertable.com/
Note that this gets very complex if you're doing other things to the table, such as client-side sorting, filtering, etc.
请注意，如果您对表执行其他操作，例如客户端排序、过滤等，这会变得非常复杂。
回答by Shadow Wizard is Ear For You
Not possible with pure CSS as far as I know (at least not cross browser) but using jQuery plugin it's possible and very simple e.g. jQuery.FixedTable.
据我所知，使用纯 CSS 是不可能的（至少不是跨浏览器），但是使用 jQuery 插件是可能的并且非常简单，例如jQuery.FixedTable。
回答by AlikElzin-kilaka
You can do it with flex display. No need for hard coded sizes.
你可以用 flex display 做到这一点。不需要硬编码大小。
Here's an example of how to do a fixed header and a scrollable content using in a table. Code:
这是如何在表格中使用固定标题和可滚动内容的示例。代码：
<html style="height: 100%">
<head>
<meta charset=utf-8 />
<title>Fixed Header in table</title>
<!-- Reset browser defaults -->
<link rel="stylesheet" href="reset.css">
</head>
<body style="height: 100%">
<table style="display: flex; height: 100%; flex-direction: column">
<thead>
<tr>
<td>HEADER<br/>------------</td>
</tr>
</thead>
<tbody style="flex: 1; overflow: auto">
<tr>
<td>
<div>
CONTENT - START<br/>
<script>
for (var i=0 ; i<1000 ; ++i) {
document.write(" Very long content!");
}
</script>
<br/>CONTENT - END
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
For a full Holy Grailimplementation (header, footer, nav, side, and content), using flex display, go to here.
回答by Adam Grant
I had a similar problem getting only the content under the header to both scroll and remain in 100% of the remaining height. Here was my fix:
我有一个类似的问题，只让标题下的内容滚动并保持剩余高度的 100%。这是我的修复：
http://jsfiddle.net/ajkochanowicz/YDjsE/
http://jsfiddle.net/ajkochanowicz/YDjsE/
This will work for simpler use cases.
这将适用于更简单的用例。
#container {
border: 1px solid red;
width: 200px;
height: 250px; /* This can be any height and everything fills in */
padding-top: 55px;
}
#something-else {
height: 55px;
width: 200px;
background-color: green;
margin-top:-55px;
}
#overflow {
border: 1px solid blue;
width:198px;
overflow-y: auto;
height: 100%;
}
回答by Joshua Robison
Mat that is simple. Here's what you want to do
垫子很简单。这是你想要做的
CSS:
CSS：
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
html, body{ width: 100%; height: 100%;}
table{
width: 100%;
height: 100%;
background-color: #aaa;
}
tbody{
width: 100%;
height: 100%;
-display: block;
background-color: #ccc;
overflow-y: scroll;
overflow-x: hidden;
}
td{
width: 100px;
height: 200px;
background-color: #eee;
}
</style>
HTML:
HTML：
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
</tbody>
</table>
回答by Dienekes
If possible in your scenario, an easy direct alternative would be to put the header in a separate div and the table inside another div with apt height and apply the following properties to the div.
如果在您的场景中可能，一个简单的直接替代方法是将标题放在单独的 div 中，将表放在另一个具有 apt 高度的 div 中，并将以下属性应用于 div。
overflow-x: hidden;
overflow-y: scroll;
回答by Kamal
try this CSS file :
试试这个 CSS 文件：
table{
width: 100%;
height: 400px;
background-color: #aaa;
}
tbody{
background-color: #CCCCCC;
display: block;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
width: 100%;
}
td{
width: 100px;
height: 30px;
background-color: #eee;
}
thead {
display: block;
height: 30px;
width: 100%;
}
works in my firefox.. not tested anywhere else.. :)
在我的 Firefox 中工作 .. 没有在其他任何地方测试过.. :)
