I am writing a page where I need an html table to maintain a set size. I need the headers at the top of the table to stay there at all times but I also need the body of the table to scroll no matter how many rows are added to the table. Think a mini version of excel. This seems like a simple task but almost every solution I have found on the web has some drawback. Does someone have a good solution?
+5
A:
Have you tried using thead and tbody, and setting a fixed height on tbody with overflow:scroll?
What are your target browsers?
EDIT: It worked well (almost) in firefox - the addition of the vertical scrollbar caused the need for a horizontal scrollbar as well - yuck. IE just set the height of each td to what I had specifed the height of tbody to be. Here's the best I could come up with:
<html>
<head>
<title>Blah</title>
<style type="text/css">
table { width:300px; }
tbody { height:10em; overflow:scroll;}
td { height:auto; }
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>One</th><th>Two</th>
</td>
</tr>
</thead>
<tbody>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
</tbody>
</table>
</body>
</html>
Chris Marasti-Georg
2008-09-24 23:23:13
I need to target IE6, IE7, FF, ... but especially IE unfortunately
minty
2008-09-24 23:27:23
Change the table so that it is less than 100% in width, say 99% and it will should take care of the problem
WolfmanDragon
2009-03-30 20:30:37
`overflow-x: hidden;` and `overflow-y: auto` also help.
justkt
2010-05-19 15:19:11
There's a lot of CSS hacks in there. It should be trivial to get working in IE7.
Jim
2008-09-24 23:45:04
+1
A:
This caused me huge headaches trying to implement such a grid for an application of ours. I tried all the various techniques out there but they each had problems. The closest I came was using a jQuery plugin such as Flexigrid (look on http://www.ajaxrain.com for alternatives), but this doesn't seem to support 100% wide tables which is what I needed.
What I ended up doing was rolling my own; Firefox supports scrolling tbody elements so I browser sniffed and used appropriate CSS (setting height, overflow etc... ask if you want more details) to make that scroll, and then for other browsers I used two separate tables set to use table-layout: fixed which uses a sizing algorithm that is guarenteed not to overflow the stated size (normal tables will expand when content is too wide to fit). By giving both tables identical widths I was able to get their columns to line up. I wrapped the second one in a div set to scroll and with a bit of jiggery pokery with margins etc managed to get the look and feel I wanted.
Sorry if this answer sounds a bit vague in places; I'm writing quickly as I don't have much time. Leave a comment if you want me to expand any further!
Luke Bennett
2008-09-24 23:30:16
Sorry to resurrect this old thread, but I really need to know how you worked this out. I got FF working but not IE/WebKit browsers. Please help when you can.
deverop
2010-01-29 04:41:22
A:
<table cellpading="0" cellspacing="0" class="scroller">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<!-- tfoot must go before tbody -->
<tfoot>
<tr>
<td>note 1</td>
<td>note 2</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<tr>
... snip ...
</tbody>
</table>
And the CSS:
.scroller tbody {
height: 400px; /* Set an absolute height */
overflow-y: scroll;
}
Obviously you would probably have other CSS rules, but I believe thats all you need.
roryf
2008-09-24 23:31:24
+5
A:
I found this which seems to work in FireFox and Internet Explorer 7.
korchev
2008-09-24 23:33:40
I don't think it works in WebKit browsers though (Safari, Chrome etc). May be wrong as I don't have such a browser on this machine to check, but I seem to recall from past investigation that this was the case. Whether this matters to the question asker I don't know.
Luke Bennett
2008-09-24 23:57:08
What is this link supposed to point to? (For future reference, it's nice to include a summary when you link to an external site, just in case the site disappears sometime.)
Michael Myers
2010-07-27 17:56:13
I agree, I really wish you wrote more about the link. I would like to find it right now.
Grae
2010-10-29 18:18:30
This does work for IE and Firefox, but I couldn't get it integrated into any of the pages on my site. A half-hour or so of head scratching revealed that using a DOCTYPE causes each row to have the height assigned to the scrolling area.Any ideas on a DOCTYPE compatible solution?
belugabob
2008-11-13 16:25:53
I am not sure this is using a doctype that causes the problem. Could be using the wrong doctype. Which one do you use ?
e-satis
2008-11-17 09:52:43
+11
A:
I had to find the same answer. The best example I found is http://www.cssplay.co.uk/menu/tablescroll.html - I found example #2 worked well for me. You will have to set the height of the inner table with Java Script, the rest is CSS.
Ken Penn
2008-09-29 21:36:36
A:
Give this a try
http://www.codeproject.com/KB/webforms/FreezePaneDatagrid.aspx
rsapru
2009-01-13 07:50:40
+1
A:
Check this one out... the developers claim that they work in "all major browsers"... That is to say IE 6+ , FF and webkit browsers... Gonna try it myself now... Will get back to you soon...
SpikETidE
2009-11-24 12:20:16
A:
Here's another possibility in this other SO question--not quite the same, but perhaps useful.
Craig McQueen
2009-11-27 00:16:08
A:
I ended up going with this solution, which requires neither extra tables nor javascript:
bluej100
2010-08-05 22:08:58
+1
A:
Not sure if anyone is still looking at this but they way I have done this previously is to use two tables to display the single original table - the first just the original table title line and no table body rows (or an empty body row to make it validate).
The second is in a separate div and has no title and just the original table body rows. The separate div is then made scrollable.
The second table in it's div is placed just below the first table in the HTML and it looks like a single table with a fixed header and a scrollable lower section. I have only tested this in Safari, Firefox and IE (latest versions of each in Spring 2010) but it worked in all of them.
The only issue it had was that the first table would not validate without a body (W3.org validator - XHTML 1.0 strict), and when I added one with no content it causes a blank row. You can use CSS to make this not visible but it still eats up space on the page.
Mick
2010-08-06 15:47:26
A:
hey guys, none of the scrollable table with fixed header footer work in chrome.
Check this blog http://s7u.blogspot.com/2008/07/dear-friends-i-want-to-discuss-about.html which has scrollable table which works IE, Firefox and also in Chrome
Shahib
2010-08-17 15:50:08
+1
A:
Hi Guys,
Try this http://s7u.blogspot.com/2010/08/fixed-header-footer-table.html, This has updated version which works fine in IE, Chrome, FF.
Shahib
2010-09-18 05:04:29