How to make html table vertically scrollable
see jsbin
I have to make my html table vertically scrollable.
I have used below code on tbody tag but its doesn\'t work for me
<
-
Just add the display:block to the thead > tr and tbody. check the below example
http://www.imaputz.com/cssStuff/bigFourVersion.html
讨论(0) -
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.
讨论(0) -
This is a work around.
http://jsfiddle.net/JJV59/2/
[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>讨论(0) -
Hi try with this overflow-y: scroll. I hope it may helps you
讨论(0) -
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>讨论(0) -
Why don't you place your table in a div?
<div style="height:100px;overflow:auto;"> ... Your code goes here ... </div>讨论(0)
加载中...
- 热议问题