How To: 100% Height Table only Scroll tbody
is it possible to scr开发者_如何学JAVAoll 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!
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/
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.
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.
Method #1
Outer div with padding, to create a 'field' for the elements. Inner div which makes the inner table scrollable. The thead table 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: auto and a height defined the rest of the table rows fall inline in the scollable area.
Method #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: auto so the able in it (which only has the content) will be scrolled inside it.
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.
A jQuery example is 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.
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.
You can do it with flex display. 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.
Mat that is simple. Here's what you want to do
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:
<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>
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.
overflow-x: hidden;
overflow-y: scroll;
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:
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%;
}
try this CSS file :
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.. :)
加载中,请稍侯......
精彩评论