Nikhil D
Reputation: 2509
How to make html table vertically scrollable
I have to make my html table vertically scrollable.
I have used below code on tbody tag but its doesn't work for me
<tbody style="height: 100px; overflow: auto">
Upvotes: 68
Views: 237656
Answers (10)
Sirach Matthews
Reputation: 157
An old question, but here is a decent solution for those looking for a quick OOB solution which does not rely on JQuery or JS. The height can be whatever best suits your needs. The OP had 100px in his example, so that's what I've made it here. You may need to tweak the style to specific use cases, but it should at least solve the OP's issue, and help others.
CSS:
table.fixed-header thead tr {
display: block;
}
table.fixed-header tbody {
display: block;
overflow: auto;
height: 100px;
width: 100%;
}
html:
<table class=fixed-header>
<thead>
<tr">
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
...
</tbody>
</table>
Upvotes: -1
Pranay Rana
Reputation: 176896
The jQuery plugin is probably the best option. http://farinspace.com/jquery-scrollable-table-plugin/
To fixing header you can check this post
Fixing Header of GridView or HtmlTable (there might be issue that this should work in IE only)
CSS for fixing header
div#gridPanel
{
width:900px;
overflow:scroll;
position:relative;
}
div#gridPanel th
{
top: expression(document.getElementById("gridPanel").scrollTop-2);
left:expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
z-index: 20;
}
<div height="200px" id="gridPanel" runat="server" scrollbars="Auto" width="100px">
table..
</div>
or
Very good post is here for this
How to Freeze Columns Using JavaScript and HTML.
or
No its not possible but you can make use of div and put table in div
<div style="height: 100px; overflow: auto">
<table style="height: 500px;">
...
</table>
</div>
Upvotes: 4
AixNPanes
Reputation: 1260
Here's my solution (in Spring with Thymeleaf and jQuery):
html:
<!DOCTYPE html>
<html
xmlns:th="http://www.thymeleaf.org"
xmlns:tiles="http://www.thymeleaf.org">
<body>
<div id="objects" th:fragment="ObjectList">
<br/>
<div id='cap'>
<span>Objects</span>
</div>
<div id="hdr">
<div>
<div class="Cell">Name</div>
<div class="Cell">Type</div>
</div>
</div>
<div id="bdy">
<div th:each="object : ${objectlist}">
<div class="Cell" th:text="${object.name}">name</div>
<div class="Cell" th:text="${object.type}">type</div>
</div>
</div>
</div>
</body>
</html>
css:
@CHARSET "UTF-8";
#cap span {
display: table-caption;
border:2px solid;
font-size: 200%;
padding: 3px;
}
#hdr {
display:block;
padding:0px;
margin-left:0;
border:2px solid;
}
#bdy {
display:block;
padding:0px;
margin-left:0;
border:2px solid;
}
#objects #bdy {
height:300px;
overflow-y: auto;
}
#hdr div div{
margin-left:-3px;
margin-right:-3px;
text-align: right;
}
#hdr div:first-child {
text-align: left;
}
#bdy div div {
margin-left:-3px;
margin-right:-3px;
text-align: right;
}
#bdy div div:first-child {
text-align: left;
}
.Cell
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
javascript:
$(document).ready(function(){
var divs = ['#objects'];
divs.forEach(function(div)
{
if ($(div).length > 0)
{
var widths = [];
var totalWidth = 0;
$(div+' #hdr div div').each(function() {
widths.push($(this).width())
});
$(div+' #bdy div div').each(function() {
var col = $(this).index();
if ( $(this).width() > widths[col] )
{
widths[col] = $(this).width();
}
});
$(div+' #hdr div div').each(function() {
var newWidth = widths[$(this).index()]+5;
$(this).css("width", newWidth);
totalWidth += $(this).outerWidth();
});
$(div+' #bdy div div').each(function() {
$(this).css("width", widths[$(this).index()]+5);
});
$(div+' #hdr').css("width", totalWidth);
$(div+' #bdy').css("width", totalWidth+($(div+' #bdy').css('overflow-y')=='auto'?15:0));
}
})
});
Upvotes: 2
AixNPanes
Reputation: 1260
I fought with this one for a while. My goal was to have a table with headers where the widths of the each header column was the the same as the corresponding body column and was the minimum size necessary to fit the data. also the body data was scrollable underneath header.
I solved this by using divs and not tables. Each "table" was a div with the header being a div of divs and the body being a div of divs. I used the style as indicated by @sushil above. I added a bit of javascript/jQuery to balance the columns. Maybe 20-30 lines.
Unfortunately I lost the code and have to rebuild it. I know this is a bit old, but maybe it will help someone else.
Upvotes: -2
Rishabh
Reputation: 1195
This is a work around.
[EDIT]
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<table cellspacing="1" width="100%" bgcolor="#cccccc">
<thead>
<tr>
<td bgcolor="#ffffff" width="70px">
</td>
<td class="csstablelisttd" width="70px">
<b>Time Slot </b>
</td>
<td class="csstablelisttd">
<b> Patient Name</b>
</td>
</tr>
</thead>
</table>
<!-- THIS GIVES THE SCROLLER -->
<div style="height: 500px; overflow-y: auto">
<table id="tableAppointment" cellspacing="1" width="100%" bgcolor="#cccccc">
<tbody>
<tr>
<td class="csstablelisttd" valign="top" width="70px">
8:00AM
</td>
<td class="csstablelisttd" width="70px">
0
</td>
<td class="csstablelisttd">
<span>Name 1</span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="90px">
9:00AM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="90px">
10:00AM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="90px">
11:00AM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="90px">
12:00PM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="90px">
01:00PM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="90px">
02:00PM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="90px">
03:00PM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="90px">
04:00PM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="90px">
05:00PM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="90px">
06:00PM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="90px">
07:00PM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
15
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
30
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd">
</td>
<td class="csstablelisttd">
45
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
<tr>
<td class="csstablelisttd" valign="top" width="90px">
08:00PM
</td>
<td class="csstablelisttd">
0
</td>
<td class="csstablelisttd">
<span></span>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Upvotes: 1
naim shaikh
Reputation: 1111
Try this one.. It is working... Here JSBIN
table tbody { height:300px; overflow-y:scroll; display:block; }
table thead { display:block; }
Upvotes: 15
Viralk
Reputation: 2389
Just add the display:block to the thead > tr and tbody. check the below example
http://www.imaputz.com/cssStuff/bigFourVersion.html
Upvotes: 18
odiszapc
Reputation: 4109
The best way to do this is strictly separate your table into two different tables - header and body:
<div class="header">
<table><tr><!-- th here --></tr></table>
</div>
<div class="body">
<table><tr><!-- td here --></tr></table>
</div>
.body {
height: 100px;
overflow: auto
}
If your table has a big width (more than screen width), then you have to add scroll events for horizontal scrolling header and body synchroniously.
You should never touch table tags (table, tbody, thead, tfoot, tr) with CSS properties display and overflow. Dealing with DIV wrappers is much more preferable.
Upvotes: 4
sushil
Reputation: 2671
Why don't you place your table in a div?
<div style="height:100px;overflow:auto;">
... Your code goes here ...
</div>
Upvotes: 113
Related Questions
- How do I make a table scrollable
- Make a table horizontal scrollable
- How to make tbody of html table scroll vertically
- horizontal scroll-able table
- Add Horizontal Scroll Table
- Horizontally scrollable table column
- How to make table scrollable in javascript
- Scrollable table
- Enabling vertical scroll on HTML tables
- Vertical and horizontal scrollable table