Menu
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!
820
The approach of this article is to create table with 100% width using width property and create vertical scroll inside table body using overflow-y property. Overflow property is used to create scrollbar in table. Use display: block; property to display the block level element.
If you want tbody to show a scrollbar, set its display: block; . Set display: table; for the tr so that it keeps the behavior of a table. To evenly spread the cells, use table-layout: fixed; . Anyhow, to set a scrollbar, a display reset is needed to get rid of the table-layout (which will never show scrollbar).
use overflow-y if you only want a vertical scroll bar and overflow if you want both a vertical and horizontal. Note: setting an overflow attribute to scroll will always display the scrollbars. If you want the horizontal/vertical scrollbars to only show up when needed, use auto .
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/
86
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.
26
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.
40
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.
42
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.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
