This jQuery plugin converts a properly formatted table, having thead and tbody elements (tfoot optional), into a scrollable table. Scrollable tables are most useful when having to display lots of tubular data in a fixed space.
Show Me The Money (Demo)
| city | state code | zip | latitude | longitude | county |
| 10 | 2 | 15 | – | – | 9 |
| Holtsville | NY | 00501 | 40.8152 | -73.0455 | Suffolk |
| Holtsville | NY | 00544 | 40.8152 | -73.0455 | Suffolk |
| Adjuntas | PR | 00601 | 18.1788 | -66.7516 | Adjuntas |
| Aguada | PR | 00602 | 18.381389 | -67.188611 | Aguada |
| Aguadilla | PR | 00603 | 18.4554 | -67.1308 | Aguadilla |
| Aguadilla | PR | 00604 | 18.4812 | -67.1467 | Aguadilla |
| Aguadilla | PR | 00605 | 18.429444 | -67.154444 | Aguadilla |
| Maricao | PR | 00606 | 18.182778 | -66.980278 | Maricao |
| Anasco | PR | 00610 | 18.284722 | -67.14 | Anasco |
| Angeles | PR | 00611 | 18.286944 | -66.799722 | Utuado |
| Arecibo | PR | 00612 | 18.4389 | -66.6924 | Arecibo |
| Arecibo | PR | 00613 | 18.1399 | -66.6344 | Arecibo |
| Arecibo | PR | 00614 | 18.1399 | -66.6344 | Arecibo |
| Bajadero | PR | 00616 | 18.428611 | -66.683611 | Arecibo |
| Barceloneta | PR | 00617 | 18.4525 | -66.538889 | Barceloneta |
Table Scroll Plugin Overview
The tablescroll jQuery plugin is a simple markup manipulation plugin, it will manipulate the table, create a couple of new elements and wrap everything in a DIV.
Using the plugin is pretty straight forward, when you download the plugin you can view the demo file to get up to speed and begin working with it immediately.
The HTML TABLE markup is also pretty basic:
<table id="thetable" cellspacing="0"> <thead> <tr> <td>city</td> <td>state code</td> <td>zip</td> <td>latitude</td> <td>longitude</td> <td>county</td> </tr> </thead> <tfoot> <tr> <td>city</td> <td>state code</td> <td>zip</td> <td>latitude</td> <td>longitude</td> <td>county</td> </tr> </tfoot> <tbody> <tr class="first"> <td>Holtsville</td> <td>NY</td> <td>00501</td> <td>40.8152</td> <td>-73.0455</td> <td>Suffolk</td> </tr> <tr> <td>Holtsville</td> <td>NY</td> <td>00544</td> <td>40.8152</td> <td>-73.0455</td> <td>Suffolk</td> </tr> <tr> <td>Adjuntas</td> <td>PR</td> <td>00601</td> <td>18.1788</td> <td>-66.7516</td> <td>Adjuntas</td> </tr> </tbody> </table>
Styling the table should go pretty smoothly, but be warned, the plugin does some width/height calculations which require the styles to be in place prior to doing the calculations.
Here is the demo CSS which should get you started:
.tablescroll {
font: 12px normal Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.tablescroll td,
.tablescroll_wrapper,
.tablescroll_head,
.tablescroll_foot {
border:1px solid #ccc;
}
.tablescroll td {
padding:3px 5px;
border-bottom:0;
border-right:0;
}
.tablescroll_wrapper {
background-color:#fff;
border-left:0;
}
.tablescroll_head,
.tablescroll_foot {
background-color:#eee;
border-left:0;
border-top:0;
font-size:11px;
font-weight:bold;
}
.tablescroll_head {
margin-bottom:3px;
}
.tablescroll_foot {
margin-top:3px;
}
.tablescroll tbody tr.first td {
border-top:0;
}
The plugin is basic and only has a few options:
$.fn.tableScroll.defaults =
{
flush: true, // makes the last thead and tbody column flush with the scrollbar
width: null, // width of the table (head, body and foot), null defaults to the tables natural width
height: 100, // height of the scrollable area
containerClass: 'tablescroll' // the plugin wraps the table in a div with this css class
};
Like most jQuery plugins, implementation is a snap:
jQuery(document).ready(function($)
{
$('#thetable').tableScroll({height:200});
// other examples
// sets the table to have a scrollable area of 200px
$('#thetable').tableScroll({height:200});
// sets a hard width limit for the table, setting this too small
// may not always work
$('#thetable').tableScroll({width:400});
// by default the plugin will wrap everything in a div with this
// css class, if it finds that you have manually wrapped the
// table with a custom element using this same css class it
// will forgo creating a container DIV element
$('#thetable').tableScroll({containerClass:'myCustomClass'});
});
Like many projects, we developers build out of necessity. I couldn’t quite find what I needed, so i wrote my own! This plugin accomplished all of what I needed, and I thought it useful enough that I would share. If you have any feature requests and/or bug reports please let me know. And the plugin name is pretty generic too (if you have a better one, feel free to drop me a line).
I’ve tested the plugin on Windows with Chrome, FF 3.6, IE 6, IE 8, Safari 4. If anyone is on a Mac, please let me know what your results are?
Download
jQuery TableScroll plugin, this project is on github
I needed a scroller for an autogenerated table, and after much fruitless searching for a simple *and* working jQuery table scroller… this one looks like it could be the one 🙂
I’m on a mac. Just having a quick look on a few browsers now:
FF 3.6.3 – perfect
Opera 10.0 – perfect
Safari 4.0.3 – showing a horizontal scrollbar but otherwise perfect. I’m sure some css will sort knock some sense into that.
I’m cautiously optimistic about checking it on IEx tomorrow 🙂 containerClass is a useful detail too. keep up the good work!
I’m hope that it proves useful to you, please give me any feedback you have so that I can improve the code and make it more robust.
The original project I coded this for needed it primarily for IE6. All my tests worked well on IE6, 7, and 8!
Scrollbars appear, but they don’t constrain the height. The height of the tablescroll_wrapper is set to auto, so no matter what the table’s size is never constrained to the size I set with tableScroll({height:#}); I’m using Safari. I have the table inside another div with a height and max-height set, but the table still expands past this height.
any ideas?
phil, for me the demo on this page works as expected in Safari PC, does it also work for you? Send me your source and I’ll take a look at it dimas3 [at] farinspace [dot] com
hi ..
after i play arround with this plugin i find it is cool and very neat ..
but I encounter a problem, when the table height is not long enough for the scroll height, the layout seem like running out ..
do you have any solution on this ?
Ian, I’ve applied a fix to the code, download it again and give it a spin…
thx dimas for you quick fixed. it works !!
really appreciate it…
All I can say is thank God for you and your plugin. I’ve been trying to get IE8 to allow me to scroll the body of a table but it doesn’t seem to like any height restrictions on table body length. This plugin helped me soo much-I wish I wouldn’t have spent the past 6 hours trying to figure out how to do this….
I’m glade you found it useful. I tried to keep the plugin simple, which should allow anyone to further extend it and customize it for their needs.
omg .. i find the plugin cound’t work in IE7.
Do you have any idea how to make it work ?
Ian, What issues are you experiencing with IE7? I did a quick test an all seems fine…
ermmm…
now it work back? i wonder whether is my IE issue or not.
I’m using the IETester to test whether it work. it some how the past few hour didn’t work .. now I close all and open it back .. it seem work.
i need to do a few more test .. btw, do you have any recommend tool to test in IE7 ?
I use VirtualBox Images primarily for IE7 and IE6 testing (most troublesome browsers)… I will definitely give IETester a try myself…
dear dimas,
ok .. i also have a virtualbox (plugable version) recently, haven’t install with the troublesome browsers yet.
now i think i found what is the problem that cause in my application,
i use the following at the end of the code
$(‘#mytable’).tableScroll({ height: 200 });
where I suppose to use
$(document).ready(function() { $(‘#mytable’).tableScroll({ height: 200 }); });
but it work fine for me to use the previous method in IE6 and IE8 without problem.
i also wanna use your plugin together with the tablesorter.com, i think the combination will be the perfect solution 🙂
anyway .. will do more testing and report you if got any problem .. thanks a lot for your quick response and help ..
Hi,
This plug-in don’t work when i am trying to add column dynamically, it works only for static tables
hunt, thanks for reporting this.
I’ve added a new version (v20100514) which supports an “undo” command which will basically revert the formatting of a table by the plugin. You can then add new columns and essentially redraw the table again.
jQuery('#thetable').tableScroll('undo'); jQuery('#thetable thead tr').append('<td>date</td>'); jQuery('#thetable tbody tr').append('<td>05/14/10</td>'); jQuery('#thetable tfoot tr').append('<td align="center">-</td>'); jQuery('#thetable').tableScroll({width:600,height:150});Known issue: when a thead column name wraps slight alignment issues may be noticed (I’ll fix this when I have a chance)
Also, to add rows dynamically you do not need to call “undo” you would simply do the following:
jQuery('#thetable tbody').append('<tr><td>Holtsville</td><td>NY</td><td>00501</td><td>40.8152</td><td>-73.0455</td><td>Suffolk</td></tr>');Works like a charm! Thanks a ton
Hi Dimas
Thanks for you solution which works really well. I would be greatful if you could show me how to modify the plugin so that the header and first row as well as the first column can be frozen?
Many Thanks
Gee, when I get a moment I will try to work on those additions.
The plugin basically manipulates the original table data, pulling it apart and then reconstructs new markup.
(view source)
line 109-148 is where the thead and tfoot are pulled from the orginal table. You can modify this to also pull the first row of the table.
A possibly easier solution to locking the first row would be to include it in the thead.
Locking the table column will be a bit more tricky, as I look at it now the plugin will probably have to be revamped to allow locking of columns, I don’t see an easy solution to this in the plugin’s current state.
This plugin works best with vertically scrolling tables vs with horizontally scrolling tables (most likely where locking columns would be most useful).
Thanks for your quick reply which is much appreciated. Annoyingly its the locking of the first column that we are really keen to get working as we work with large tables. I was thinking along the lines of selecting the first column using JQuery from the original table then passing it to the plugin. Even a quick hack will be much appreciated.
Many thanks again
Hi Dimas,
I very much like the plugin. So far it is serving my needs well. I have one question. I have a need to support window re-sizing etc. The plugin is great however when I my browser size increases/decreases the scrollable table does not adjust. I’ve made a few attempts to rectify this but have not arrived a ta solution yet. Do you have any ideas suggestions on what object or objects that I need to adjust the table size dynamically or perhaps a different/better solution?
I’d appreciate any help you can offer.
-Ken
hi,
one problem is when setting the width of a table to 100% when the scrollbar is added to the right, thus enlarging the width of the full table and i have to scroll the window to the right to see the whole scrollbar. i need some solution to keep the table width with the scrollbar the same as the table without scrollbar.
thanks
Another question is how to make this work on IE with jQuery v1.3.1? I’ve tested it on IE7 and the table shows both scrollbars (vertical, horizontal).
Hi Dimas,
This solution is just what we are after altough we also have a requirement to be able to freeze the first column akin Excel as per Gee’s and now considering other third party datagrids. The only snag I came across from this solution is that the header columns didn’t appear to be inline with the datagrid. Any advice suggestion from anyone would be greatly appreciated.
thanks
Girma
Hi,
thanks for the great job. I got a problem with a window’s resize. The table is contained in a div with height 100% and when I resize the window, the window’s column don’t follow the scaling. Any ideas?
Sorry: I made a mistake. The problem is the scaling of table’s column contained in a div with Width 100%.
This is possible to work around this I have just made a modification to this plugin to accommodate for fluid designs.
There seems to be a bug in your code…
In your undo function you have…
container.empty();– This leave’s an empty div as an artifact in the dom, running your undo function multiple times leaves multiple artifacts.
Try using this…
container.remove();Seems like a good replacement to me…
I have also written another line to reset the width’s of the table, leaving the table in its original state after the undo function is run.
Here’s my own take on your undo function.
Hope you find a use for this 🙂
if (options == 'undo') { var container = $(this).parent().parent(); container.find('.tablescroll_head thead').prependTo(this); container.find('.tablescroll_foot tfoot').appendTo(this); container.find('.tablescroll_body, th, td').width(''); container.before(this); container.remove(); return; }Sam, thanks for the code. My focus has been more on WordPress as of late, but, I will be reviewing this plugin and making adjustments to resolve most of its shortcomings.
Your plugin works well but I think it needs some CSS adjustments…
I copied the example from your site and adapted it to my web app. I noticed a slight difference between the spacing of some header columns and their corresponding data columns.
I went through your code and finally discovered that removing this CSS specification :
/*
.tablescroll td
{ padding:3px 5px; }
*/
…makes everything work as expected! Looks like adding some padding to the table cells makes the width calculations go wrong.
I’m not sure of this one but when table header’s width is set by using the
$(this).width()of its child cell, maybe the padding is appended to the previously retrieved width . As a result, the total width gets larger than expected.I’m using FF 3.6.6.
Thanks!
Mat
Just what I needed –
Nice one!
But I am having a problem with alignment when using “colspan” in any cell inside tbody group.
can anyone help with this?
Example:
I believe this plugin doesn’t cater for colspan in any shape or form.
You may be able to achieve a similar result using another table inside your td rather than using col span
Example:
Doesn’t seem to get the widths of the column headers right if I have hidden columns in my table (I need the hidden columns for the table sorting plugin that I’m using.
Dumb question: I have *lots* of data going to the table, and prior to its being re-rendered, the “native” ugly table is displayed. Is there a way to hide the table until jquery.tablescroll.js is done with its magic?
Thanks!
@Jon, what sorting plugin are you using?
@Adam, I will see if i can solve this. I tried using some css to hide the table prior to rendering, but this does no good as some of the calculations need the table to be visible. My next test will be to move the table off stage left and then redisplay it after rendering.
Here is a good jquery plugin, working in all browsers !
You have a fixed header table without fixing his width…
Check it : http://www.tablefixedheader.com
bln, very nice plugin, great job!
hi dimas,
your plugin is just wonderful – but i encountered a little problem with it:
i’m using ajax for dynamically loading the table’s content.
so the problem is: after loading i need to re-apply the plugin to the table which will end up in a little mess 🙂
so the plugin should check it was already applied before to the table (classes, wrappers and such) and then only apply things like syncing column widths.
could you please add this? 🙂
thanks in advance
Fuxi, try using:
// first applied jQuery('#thetable').tableScroll({width:600,height:150}); // undo jQuery('#thetable').tableScroll('undo'); // reapplied jQuery('#thetable').tableScroll({width:600,height:150});Hi, I was having the same problem as Fuxi was, and your fix seems to work – except for the header. I’ve noticed that for each new row I add, it scoots the header over to the left a few pixels. Any ideas on how to work around that?
hi dimas,
sorry – i accidentaly submitted my post too early .. 🙁
thx for your reply. i’ve tried the undo method but unfortunately it seems to be a bit buggy.
i’ve used the sample supplied from the download and changed the code as u suggested:
jQuery(document).ready(function($)
{
$(‘#thetable’).tableScroll({height:150});
$(‘#thetable’).tableScroll(‘undo’);
$(‘#thetable’).tableScroll({height:150});
$(‘#thetable2’).tableScroll();
});
when checking the source code after that, you’ll notice that inside the <div class=”tablescroll> there’s a second, obsolete div:
<div class=”tablescroll” ></div>
if u undo + re-apply a several times it will be added each time!
when using the plugin on a table which is placed within several other wrappers, things are chaotic – unfortunately i couldn’t reproduce yet – but other div elements outside the table are getting involved as if there’s injected some div which isn’t closed and the html gets messed up.
so i think the easiest way to solve this should be a “init” flag after the plugin is applied for the first time and if it’s already initialized it should only perform the required other functions.
hope i could describe my problem properly 🙂
thx
Hi Dimas,
Thanks a ton for this handy and useful plugin.
I need this kind of plugin in one of my project and I found it right plugin at right time.
Thanks once again man.
Keep doing good work
Vaibhav Malushte
Nice plugin!
If it could include Sortable Headers
and Pagination, then it would be really cool.
Nice job! I was looking at a number of plugins claiming to do what yours does and they all fell short.
Is there a way to contribute to your script? I’ve found a number of cases where the script is not accurate or fails and I have fixes for them but not found a way to contribute those improvements. Some of the things I have addressed are:
– correct handling where a mix of TH and TD in the first rows of the thead and tfoot may exist (previously did not consider that TH and TD could be mixed in thead or tfoot)
– correct final table height to include header and footer (previously height resulted in body height)
– correct table-height / scroll-height calculations where borderline heights result in large presentation gaps
Joe, any improvements you make are welcome. The project is on github, feel free to fork it and make pull requests…
great work
Here is my case, as i’m using asp:GridView controls to present contents, there’s no thead or tfoot after gridview control are rendered, so i changed the code a little so that this plugin can handle thead and tfoot by classname.
Hello,
It is a wonderful plug-in. However it doesn’t work when we have colspan and it’s regrettable.
Best regards
ammah
@ikaiser (and other .NET developers). My solution to get this working in .NET was to add two things:
1)
Make sure the GridView has the property UseAccessibleHeader=”true”
2)
In the GridView’s PreRender event, do something similar to the following:
Any possible to make this to work with fluid layout when resize window the width also resize?
great plug in
thanks
Hi the plugin would be very great if i can apply the colspan inside the thead or either the tfoot otherwise this plugin is nothing.,
I really like this plugin but I am having the same problem that someone reported last May. When my table doesn’t fill the defined space I loss all css formatting. In response to the earlier question you said that you made a change—and the person responded that it worked. Well, I have the 10/3/2010 version of the plugin installed but I am getting the loss of formatting.
Suggestions?
TIA
Responding to my own question. I “swiped” the version of tablescroll.js that you are using on this page and now I get formatting. Soooo, the “download” version ain’t the latest and greatest!
I am trying to use TS in a dialog. The first time I open the dialog, no problem (you need to execute the ‘tableScrollable’ method AFTER the “dialog(“open”)). BUT, the second time that I open the dialog, the method doesn’t work and I get a plain table. For some reason it looks like the ‘tableScroll’ method doesn’t work after the first call to it.
Ideas?
Hi There,
I want to have the both horizontal and vertical scrolls. How can i do that?
Big help
Have a gud day.
R.
I love your plugin, it worked perfectly except for browsers on Macs, the scroll bar is a couple of pixels wider than they are on windows and linux, do you have any idea how to get the plugin to check for mac and change the width of the rightmost th?
thanx
Great plugin. Very easy to implement. Thank you.
I noticed it does not scroll on my iPad (don’t really need it now, but would be very cool). I see the reduced table but only the contents that lives within the visible div. Any ideas how to address that?
Jorgen, I have not looked at at the functional differences between ipad and iphone, but if its anything like the iphone, it seems like the browser only supports a single page scroll bar (no inner, iframe, div, etc scroll bars) …
Workarounds would probably be to have a “more” link which points to a dedicated page for that table, so that the user can scroll the data, or the “more” link could expand the table data or perhaps the table could page through the values/pages via next/prev buttons.
Obviously the plugin does not currently support this, but I am just thinking out loud as to what can be done.
Hi Dimas,
Someone had asked this before, is there way to make the table resizable (width not fixed)? I tried to modify the css but the header columns don’t resize even when the thead row does.
Thanks,
Shao
Hi, I am very new to JQuery.
I need the same functionality, so decided to try it.
When I download the demo from the link provided, and run the demo.html file, I do not see any horizontal/vertical scroll bar, but just the table data.
Please guide how do I use the demo provided.
Hello Dimas
Thank you for this great piece of software. I tried several scrollable table solutions, yours is the only one I got to work easily!
Now I have a question: When printing, browsers will print the table as tweaked by the script. Anyway, it would be sensible to print the table as coded rather than the on-screen representation created by the script, where parts of the content are hidden.
Do you have a solution for this problem?
Hi Dimas –
Very nice implementation. Question:
I’m using JQuery Tabs, which hide various tables until clicked.
The default tab (div) that has a table in it works perfectly – the scroll works. However, when I click on other tabs (with tables that should be formatted as yours above), they come out as regular tables (not tables with scrollbars and fixed table first rows).
Do you know if your plugin perhaps doesn’t allow for multiple tables to be formatted within a single page?
Thanks!
SC
Hey Dimas –
In case this helps anyone else. I started back at the basics. I backed out my JQuery tabs and the multiple tables formatted nicely.
I then applied the tabs (using Jquery “$().tabs()” function and the formatting went back to messed up on all but the first visible form.
So I thought, perhaps it is the order in which you call the tableScroll versus Tabs – perhaps the rendering is important. Turns out, it appears to be. If tableScrolls are before the Tabs call, it works!
Thanks again for a very useful plugin!!!
I found one additional setting (alwaysWrap) to be useful for me in order to make sure the table has a consistent look regardless of whether or not the content needs to scroll.
I tested this on IE7 and Firefox. That worked.
But not on IE6 !
Can anyone guide on how to enable the same for IE6 ?
Every time I run this page, I get a page load error, I can see the table data, but not the horizontal bars. The error says jQuery is undefined.
Please help!
I thing jQuery is not supported on IE 6.
Am I correct? Please let me know…
@Sudipto, jQuery should work fine in IE6. In fact I created this plugin specifically to work on IE6/7 … when I load this page in IE6/7 (win) everything works as expected (using IE Tester).
If your error is that jquery is undefined, there may be something blocking how jquery is loading.
Thanks Ryan! I looked for this function.
Doesn’t work in jQuery dialog.
Hi there,
I need put two or more scrolled tables in one web page. Each scrolled table has different table width. How can I get them?
Thanks
Tim
For SCJ and others : two words about my tab experiments :
I does not work after tabs are rendered becauses tables in unactive tabs are hidden.
calling .tableScroll() in the show event of the tab make it work perfectly with tabs and speed-ups the initial rendering when multiple tabs and tables are on the same page.
I WOULD REALLY APPRECIATE a COLSPAN problem solution.
Ludovic.
Hi
Thanks,
it is the only one I got to work
eny idia how to set the to fix size with overFlow hidden?
thanks
Hola, I have a question, i use your great plugin but i have a problem with the width of cells of tbody and thead because it’s not the same width and i don’t know why … someone can help me pliz ?! ^^
Great work. I was wondering if there is a way to eliminate the scrollbar, thereby saving that much space (it’s also a bit of an eyesore, IMO), and adding Up/Down/First/Last navigation icons in close proximity to the table so users can click on those controls instead?
Great Plugin, thx.
However, ive found it acts very strange when the table your effecting is itself wrapped in a normal table (it adds rightside padding for some reason)
If i get to the bottom of it, ill post further.
I found changing width:0px; on line 39 of the code resolved my issue.
Hope that helps someone else.
Please explain the use of flush. I want to have the vertical scroll on the right of the total width of newly created div not at the end of Thead and TBody column???
Plz.
Thanks for developing this. I can totally relate to your comment about “build[ing] out of necessity”. You saved me a bunch of time by sharing this project. Kudos!
Nice Plugin, exactly what I was looking for.
Thanks also to Larry Woods (February 4, 2011 at 7:49 pm), I also had issues where the CSS formatting was missing if the number of rows resulted in the height being less than the scroll bar height.
Looking great now.
Thanks!
Nice! I’d love to see a sort by column option as well.
Hi Dimas,
Markus Ernst asked a while back about getting the data in the table to display for print. I had the same problem and discovered that if you use this rule in your print css you can get the data to display for print:
.tablescroll_wrapper {
overflow: visible !important;
height: 100% !important;
}
Hope that helps someone. Thanks for the plugin Dimas!
I have been trying to plug this into some tables today that sometimes have a second set of titles (spanning multiple columns).
I replaced this line:
var thead_tr_first = $('thead tr:first',tb);with:
if (spantitle) { var thead_tr_first = $('thead tr:eq(1)',tb); } else { var thead_tr_first = $('thead tr:eq(0)',tb); }and set the spantitle variable before calling tablescroll.
If spantitle is true, it skips over the widths for the first row and uses the second row as the basis for the column widths.
I hope this helps others. I’d also like to add my thanks. Apart from this minor issue, this works great.
Table header are not properly aligned with the data, looks like the header widths are not measured properly. My table is retrieved through a AJAX call when i click on a tab. Here is the code snippet.
$(function(){ $('#tabs').tabs({ select: function(event, ui) { if(ui.panel.id == 'tabs-7'){ $('#tabs-7').html($.ajax({url: "./scripts/table.php",async: false}).responseText); $('#mytbl').tableScroll({height:400,width:800}); } } }); });Its a great plugin…
How can i make this work with live or livequery, any ideas?
Figured out how to take it live
jQuery(document).ready(function($) { $('#thetable').livequery(function(){ $(this).tableScroll({height:650}); }); $('#thetable2').livequery(function(){ $(this).tableScroll({height:650}); }); });You really helped me out here, thanks!
@ramana try this:
$(function(){ $('#tabs').tabs({ select: function(event, ui) { if(ui.panel.id == 'tabs-7'){ $('#tabs-7').html($.ajax({url: "./scripts/table.php",async: false}).responseText); $('#mytbl').tableScroll({height:400,width:800,flush:false}); } } }); });I am having the same problem as @ramana.. The headers won’t align properly with the data…
I needed to make tables inside of tables for popups to other items… Yeah I know. Just being difficult. 🙂 So I changed this and it seemed to work. Looks for the immediate child sets so I do not have to worry about it finding every thead or tfoot and pre-pending it to the first thead grouping it does.
Changed from:
if (has_thead) { var tbh = $('').insertBefore(wrapper).prepend($('thead',tb)); } if (has_tfoot) { var tbf = $('').insertAfter(wrapper).prepend($('tfoot',tb)); }Changed to:
if (has_thead) { var tbh = $('').insertBefore(wrapper).prepend($('> thead',tb)); } if (has_tfoot) { var tbf = $('').insertAfter(wrapper).prepend($('> tfoot',tb)); }This is great 🙂
However I have the same problem as ramana (the thead seems to get out of sync when refilling the table via ajax.)
I tried the flush, and that does not work, I also tried to pass an undo string like this
$(‘#myTable’).tableScroll(“undo”);
because the code seems to have some support for that, but that does not work either 🙁
anybody got a quick fix for ajax refill?
Hey, nice plugin. I’ve tried to use many fixed-headers plugins, but only your has worked 🙂
However, it doesnt has a horizontal scroller with a fixed vertical scroll. Do you plan to add this feature on it’s next update?
Congrats
this is a great tool, but the scrollbars are not visible on the iPad and therefore it does not scroll.
any ideas why?
thanks
Is there a way to lock the first 2 columns?
Awesome plugin, Thanks
can you set the columns to a specified width?
thanks!
Bob
Hi,
Thanks so much for making this.
I had a little problem with my header lining up with the table, so I added this when I invoked it:
$(‘.tablescroll_head’).css(‘width’, $(‘.tablescroll_body’).width());
$(‘.tablescroll_head th’).css(‘padding’,’3px 5px’);
Dan
Hi,
I am using the code, could you provide some guidelines on the following thing:
I am using while loop for table data as its from database and I want to use it in dynamic way
and this way for other fields
The thing is all thing is working fine with Mozilla or chrome, but when trying this on IE-8 its putting some space blank between End of THead and Start of TBody which is same irrespective of browser and its height is same.
Is it related to while looping in JSP OR
Its about DocType declaration at the top of the JSP.
I have searched all possible option.
Please guide.
Thanks.
Please see the code for my previous comment/ question:
x
y
z
@Dan,
excuse me, where would you put this you say?
$(‘.tablescroll_head’).css(‘width’, $(‘.tablescroll_body’).width());
$(‘.tablescroll_head th’).css(‘padding’,’3px 5px’);
Thanks!
In Chrome 15, the table headers don’t line up with the table content at all.
@Jacob: That code needs to go in your tag where you declare the scrollable table, after that declaration. Be careful with the fancy quotation marks if you copy/paste from this site.
Hi Rufus,
thanks for your reply. Much appriciated.
I’ve played around a lot with the entire code and still my tables doesn’t align properly with the content. I’m hoping to get it work for Firefox 8.0.
Were there ever a fix for it? My content is loaded through a php script and to be real honest I am not a guru on JavaScript.
Thanks for your time and advice!
Hi,
I use safari in mac. I used the plugin and it was very useful to me, but there’s a weird thing i’ve noticed. At first load, the plugin doesn’t work, but I’ve tried to reload it again it work.
This always happen when the time i run it.
Here’s my code:
/**/
Please let me know if there’s something that i’ve not correctly used.
Derick
Nice job. I’am trying to adapt the table lenght on window resize this way :
$(window).resize(function() {
var h = $(window).height() - 200;
$(".tablescroll_wrapper").height(h);
});
//200 is an example corresponding to the total top and bottom header and footer of my page
With full screen, if ever vertical scroll is not necessary, then, on window resize, a vertical scroll appears. This is good, but an horizontal scroll appears also… due to the the width change when the vertical scroll appears. is there a way to achieve this ?
My alignment issue was caused by borders. They need to be consistent in the and .
I am using ajax to update my table. When my table is updated or reloaded, the headers/pagers are being recreated each time? Any way to get around this?
i can see scroll bar after my page got load. this is fine.
i have search button, on search button click i am rendering html table and setting like table.html(renderhtml) that time it shows 2 tables. why it is like that.
This plugin is interesting, but alters hard-coded widths, and the headers and footers do not line up anymore (WIN 7 IE8)
Speaking of footers, you need a little HTML 101 because you do not understand the basic markup.
table
thead
TFOOT
tbody
See reference before you dismiss me…
w3schoolscomtagstag_tfoot.asp
Nice try, but try and tweak it to where it doesnt alter what I took time to write… it also will not work “out-of-the-box” with jquery.tablesorter
too “buggy” for my tastes…
Hi,
I have got this working just about as I want it to – but I now have a problem. I need to use Javascript to access various cellTexts of the rows in the tHead and the tFoot sections of the table. I just can’t seem to do that, I can only get rows in the tBody as this seems to have rearranged the header and footer elements of the table in such a way that I can’t get them – can you help?
My header isn’t lining up with the scrollable content. It’s like it’s ignoring the cellspacing and cellpadding and something else has to be in the equation. I’ve removed all CSS and the problem persists. It has to be in the jQuery.
http://www.cineweekly.com/blogs/gallery.html
This is nice jquery for use of table body scroll . but it’s working only whit 1 table on a page if there are more than 1 table than it doesn’t works .
Is there any other method to use this or it works only with 1 table on a page
Here’s how I overrode the widths in order to make the table width resize and zoom properly:
.tablescroll_head
{
font-size: 11px;
font-weight: bold;
background-color: #eee;
border-left: 0;
border-top: 0;
margin-bottom: 0;
width: 100% !Important;
}
.tiTable /* class for my table element */
{
width: 100% !Important;
border-collapse: collapse;
display: table;
}
Any idea how to get an event if last row is reached to load more content?
@rabe , you can do that with the infinite scroll plugin.
http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
that’s certainly the right logic for your needs
I cannot get rid of horizontal scroll bar. I have the page loading into an iframe and the height is fine but no matter what I use for the width the horizontal scrool bar wont go away in IE.
TABLE ALIGNMENT
This Works Pretty Good
its a result of an ajax call
function checkNum($num){
return ($num%2) ? TRUE : FALSE;
}
$COLUMNS=10;
$FOUNDRECORDS=’15’;
$count=’0′;
$query=”SELECT * FROM sc_bank_accounts ORDER BY prim DESC, account ASC”;
$debug_message.=$query.””;
$result=mysql_query($query) OR $debug_message.=mysql_error().””;
$debug_message .= mysql_affected_rows().” row(s) affected /r/n”;
$records=mysql_affected_rows();
$debug_message.=$records.” RECORDS “;
if($records>$FOUNDRECORDS){ // set the footer width
$spanpixels=’1452′;
}else{
$spanpixels=’1432′;
}
$bank_account_table=”
.tablescroll
{ font: 12px normal Tahoma, Geneva, \”Helvetica Neue\”, Helvetica, Arial, sans-serif; background-color:#fff; }
.tablescroll td,
.tablescroll_wrapper { font-size: 12px; border:1px solid #000000; text-align: center }
.tablescroll_head,
.tablescroll_foot
{ font-size: 16px; border:1px solid #000000; background-color: #EEEEEE; color: black; overflow:hidden; text-align: center }
.tablescroll td
{ padding:3px 5px; }
.tablescroll_wrapper
{ border-left:0; }
.tablescroll_head
{ font-size:11px; font-weight:bold; background-color:#eee; border-left:0; border-top:0; margin-bottom:3px; }
.tablescroll thead td
{ border-right:0; border-bottom:0; }
.tablescroll tbody td
{ border-right:0; border-bottom:0; }
.tablescroll tbody tr.first td
{ border-top:0; }
.tablescroll_foot
{ font-weight:bold; background-color:#eee; border-left:0; border-top:0; margin-top:3px; }
.tablescroll tfoot td
{ border-right:0; border-bottom:0; }
.tablescroll th { font-size: 16px; border:1px solid #000000; background-color: #EEEEEE; color: black; overflow:hidden; text-align: center }
.tablescroll td { font-size: 12px; border:1px solid #000000; text-align: center }
.tablescroll th.spanall { width: “.$spanpixels.”px; max-width:”.$spanpixels.”px; overflow:hidden; }
.tablescroll th.delete { width: 87px; max-width:87px; }
.tablescroll td.delete { width: 85px; max-width:85px; overflow:hidden; }
.tablescroll th.checkbox1 { width: 87px; max-width:87px; }
.tablescroll td.checkbox1 { width: 85px; max-width:85px; overflow:hidden; }
.tablescroll th.account_name { width: 280px; max-width:280px; }
.tablescroll td.account_name { width: 280px; max-width:280px; overflow:hidden; }
.tablescroll th.update { width: 122px; max-width:122px; }
.tablescroll td.update { width: 120px; max-width:120px; overflow:hidden; }
.tablescroll th.bank_name { width: 252px; max-width:252px; }
.tablescroll td.bank_name { width: 250px; max-width:250px; overflow:hidden; }
.tablescroll th.description { width: 252px; max-width:252px; overflow:hidden; }
.tablescroll td.description { width: 250px; max-width:250px; overflow:hidden; }
.tablescroll th.type { width: 152px; max-width:152px; overflow:hidden; }
.tablescroll td.type { width: 150px; max-width:150px; overflow:hidden; }
.tablescroll th.checkbox2 { width: 87px; max-width:87px; overflow:hidden; }
.tablescroll td.checkbox2 { width: 85px; max-width:85px; overflow:hidden; }
.tablescroll th.checkbox3 { width: 87px; max-width:87px; overflow:hidden; }
.tablescroll td.checkbox3 { width: 85px; max-width:85px; overflow:hidden; }
.tablescroll th.checkbox4 { width: 87px; max-width:87px; overflow:hidden; }
.tablescroll td.checkbox4 { width: 85px; max-width:85px; overflow:hidden; }
.tablescroll th.endcap { width: 3px; overflow:hidden; }
“;
$typeselect=”Checking/Savings
Credit Account
Investment Account”;
$bank_account_table.=””;
$bank_account_table.=””;
$bank_account_table.=””;
$bank_account_table.=”DELETE”;
$bank_account_table.=”PRIMARYACCOUNT”;
$bank_account_table.=”ACCOUNT NICKNAME”;
$bank_account_table.=”UPDATENICKNAME”;
$bank_account_table.=”BANK NAME”;
$bank_account_table.=”TYPE”;
$bank_account_table.=”DESCRIPTION”;
$bank_account_table.=”SHOWMASTER”;
$bank_account_table.=”SHOW ININCOME”;
$bank_account_table.=”SHOW INEXPENSE”;
if($records>$FOUNDRECORDS){
$bank_account_table.=””; }
$bank_account_table.=””;
$trcount=’0′;
$bank_account_table.=””;
$query=”SELECT * FROM sc_bank_accounts ORDER BY prim DESC, account ASC”;
$debug_message.=$query.””;
$result=mysql_query($query) OR $debug_message.=mysql_error().””;
$debug_message .= mysql_affected_rows().” row(s) affected /r/n”;
$records=mysql_affected_rows();
$first=’1′;
while($row=mysql_fetch_assoc($result)){
if($row[‘prim’]==’1′){
$PRIMARY=’CHECKED’;
} else {
$PRIMARY=”;
}
if($row[‘show’]==’1′){
$SHOW=’CHECKED’;
} else {
$SHOW=”;
}
if($row[‘show_income’]==’1′){
$SHOWINCOME=’CHECKED’;
} else {
$SHOWINCOME=”;
}
if($row[‘show_expense’]==’1′){
$SHOWEXPENSE=’CHECKED’;
} else {
$SHOWEXPENSE=”;
}
$count++;
if(checkNum($count) === TRUE){
$color=”white”;
}else{
$color=”lightgray”;
}
if($row[‘prim’]==’1′){
$color=”lightgreen”;
}
$typeaccount=”DEFAULT”;
if($row[‘type’]==’0′){
$typeaccount=”Checking/Savings”;
}
if($row[‘type’]==’1′){
$typeaccount=”Credit Account”;
}
if($row[‘type’]==’2′){
$typeaccount=”Investement Account”;
}
$trcount++;
$bank_account_table.=””;
$bank_account_table.=””;
$bank_account_table.=””;
$bank_account_table.=””;
$bank_account_table.=””;
$bank_account_table.=””;
$bank_account_table.=””.$typeselect.””.$typeaccount.””;
$bank_account_table.=””.$row[‘description’].””;
$bank_account_table.=””;
$bank_account_table.=””;
$bank_account_table.=””;
$bank_account_table.=””;
}
$count++;
if(checkNum($count) === TRUE){
$color=”white”;
}else{
$color=”lightgray”;
}
$bank_account_table.=””;
$bank_account_table.=””;
$bank_account_table.=””;
$bank_account_table.=””;
$bank_account_table.=””;
$bank_account_table.=”DELETE”;
$bank_account_table.=”PRIMARYACCOUNT”;
$bank_account_table.=”ACCOUNT NICKNAME”;
$bank_account_table.=”UPDATENICKNAME”;
$bank_account_table.=”BANK NAME”;
$bank_account_table.=”TYPE”;
$bank_account_table.=”DESCRIPTION”;
$bank_account_table.=”SHOWMASTER”;
$bank_account_table.=”SHOW ININCOME”;
$bank_account_table.=”SHOW INEXPENSE”;
if($records>$FOUNDRECORDS){
$bank_account_table.=””; }
$bank_account_table.=””;
$bank_account_table.=””;
$bank_account_table.=””;
$bank_account_table.=””; // this is the tablescroll wrapper
If the table is in another AJAX page then which function to of jQuery to call while getting the response from the home page?
I’m also running into the issue where the table header th widths are not matching up with the table body td widths. I already implemented the plugin into our app, but if I can’t figure out a fix, this is a dealbreaker for me. Has anyone had any luck? I’ve read through these comments but nothing seems to work. My borders are the same, padding is the same, etc…
Hi,
It works good on my page. n1 work 😉
But .. how can i get the scrollbarTop?
Hi,
Really useful plugin in, proper support of colspan would be really useful.
I have found a hack that fixes it though – by adding an extra row at the top of the table which has a or for each column in the table (ie no colspans on the first row) then it will render properly.
Giving the cells in that row a height of 1px will keep them pretty much hidden.
IE shows Syntax-Error already on this demo-page so this plugin got kicked out of further evaluation right away!
Safari
Version 5.1.6
Works
hi
i have a big gap between the thead and the tbody on IE
on FF end chrom it work good
Hi, can you change the code and make the first column fixed while horizontal scrolling?
Thanks.
I used it with jQuery UI Tabs. On single tab it is good, but when I use it with multiple tab, table body width becomes 102px.
Please check in IE when there is only one row in the table… scroller gets messed up….
Awesome plugin, but I have the same problem – when there is only one row in IE or Chrome, the table properties don’t show and the scroller is messed up. Any suggestions?
Has anyone tried altering this plugin to fix the column alignment issues in Internet Explorer?
I was thinking of spending some time on it but don’t want to waste my time if it’s not fixable.
Any feedback would be appreciated.
Very nice, however doesn’t work with colspans in the Header (Multi-row header leading with some colspans)
Hi, this plug-in is great, but it hides the table´s border, how can i solve this (i think) issue.
Thankss
We have implemented on gridview in asp.net. All looks good except for paging within footer. Paging functionality works but, page numbers are unequally spaced across footer and we can’t seem to control them with the style. Any suggestions
There is an issue when the table does not have enough rows in it to force a scroll. Then it does not work.
Does anyone know if this works on ipad?
Thanks!
Sorry, more specifically, i am trying to use the ‘-webkit-overflow-scrolling: touch’ property and it does not seem to be working(it scrolls but not the way this property should)
Thanks again!
In IE8:
Radio buttons within tags do not display as checked. They are clickable, but there is a jQuery[some #]=”13″ attribute on the input element that seems to break. Do you have any idea why this is or how to fix it?
Thanks.
Give this text in the first column of first row of table body – ‘Its a laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaarge text’ and let me know if the table is aligned properly
Hi Dimas,
Great Work!!!
One question, in my implementation, the table is dynamically created based on user’s input.
Is it possible to use your library in my case?
If so, could you give me a tip?
Would it be possible to use this for horizontal scrolling as well ?
not working in colspans
This is broken in query-1.9.
when I reapplie the function, he resize well the body table, but don’t resize the header.
Tested on IE6, IE9, FF.
Looking for some help. I’ve implemented this on a few dynamic ColdFusion tables that don’t always have content in the first row of all columns, and the plugin appears to set the width based on just the first row. How do I get it to check additional rows if there is no content in the first row for any given column? Or, at the very least, match the body row to the header row. Right now, the alignment is off between the header and the body in instances where there is a label in the header cell but no content in the first row of that column.
alignment issues. I created a workaround.
1) keep the header in a separate div
2) After forming the table use jquery to get each td width in a row then use jquery to set the cell widths in the header and also check if there is a zero width TD in which case figure what your min width can be.
I did this by assigning a class to each TD
Also for the one roll scrollbar issue just return your records and below X records dont call tablescroll
I’m not great at including things in jsfiddle, but this does the trick if you want to just dive in and get started:
http://jsfiddle.net/fk5zQ/
This is, effectively, the shipped demo.html with one change to help me confirm that yes this jQuery table scroll plugin does play nicely with multiple tables and picking which one(s) to scrollify. Rock on – thanks for sharing!
If I add rows using jquery, the plugin does not detects that the height of the table has increased, therefore the scrollbar does not show