如何：100％高度表仅滚动tbody
[英]How To: 100% Height Table only Scroll tbody
问题描述
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? 
是否可以使用CSS滚动100％高度表的内容而不是标题，只显示tbody内容侧面的滚动条而不是标题行？ Thanks! 谢谢！
9 个解决方案
解决方案1
7 2012-04-09 13:29:06
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年。
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标记才能使它成为可能而第二个表有效地使用嵌套表，但是fallback / plain HTML看起来像普通的普通表。
Method #1 方法＃1
Outer div with padding, to create a 'field' for the elements. 带有填充的外部div，为元素创建“字段”。 Inner div which makes the inner table scrollable. 内部div使内部表可滚动。 The thead table row is absolutely positioned to make it stay on top of the body, same is done with the footer. thead表行绝对定位，使其保持在正文的顶部，与页脚相同。 Because the inner div is overflow: auto and a height defined the rest of the table rows fall inline in the scollable area. 因为内部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. 但是外表的tbody只包含一行，一列，并且在其中有另一个表。 This column has a height defined and overflow: auto so the able in it (which only has the content) will be scrolled inside it. 此列具有已定义的高度和overflow: auto因此其中的内容（仅包含内容）将在其中滚动。
解决方案2
3 2011-01-05 13:25:48
A javascript solution is to use 'floating headers'. 一个JavaScript解决方案是使用'浮动标题'。 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. 你把整个表放在一个带有溢出集的div中，然后JavaScript将克隆表头并将它放在div的顶部，有点像Apple接口。
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. 请注意，如果您正在对表执行其他操作，例如客户端排序，过滤等，这会变得非常复杂。
解决方案3
3 2018-06-01 19:06:06
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/
解决方案4
1 2015-10-26 16:20:31
You can do it with flex display. 您可以使用flex显示进行操作。 No need for hard coded sizes. 无需硬编码尺寸。
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 Grail implementation (header, footer, nav, side, and content), using flex display, go to here . 有关完整的圣杯实现（页眉，页脚，导航，侧面和内容），使用弹性显示，请转到此处 。
解决方案5
1 2010-12-26 14:55:50
据我所知，纯CSS不可能（至少不是跨浏览器），但使用jQuery插件它是可能的，非常简单，例如jQuery.FixedTable 。
解决方案6
0 2012-05-23 14:44:08
I had a similar problem getting only the content under the header to both scroll and remain in 100% of the remaining height. 我有一个类似的问题，只有标题下的内容滚动并保持在剩余高度的100％。 Here was my fix: 这是我的修复：
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%;
}
解决方案7
0 2010-12-26 14:54:26
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;
解决方案8
0 2011-01-18 16:58:29
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>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
解决方案9
-1 2012-04-09 12:38:29
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中工作..没有在其他任何地方测试.. :)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.