145 responses to “jQuery Scrollable Table Plugin”

  1. plug

    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!

  2. phil

    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?

  3. ian

    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 ?

  4. ian

    thx dimas for you quick fixed. it works !!

    really appreciate it…

  5. kingjesse2

    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….

  6. ian

    omg .. i find the plugin cound’t work in IE7.

    Do you have any idea how to make it work ?

  7. ian

    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 ?

  8. ian

    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 ..

  9. hunt

    Hi,

    This plug-in don’t work when i am trying to add column dynamically, it works only for static tables

  10. Akio Hamasaki

    Works like a charm! Thanks a ton

  11. Gee

    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

  12. Gee

    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

  13. Ken

    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

  14. jon

    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

  15. jon

    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).

  16. Girma

    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

  17. Luca

    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?

  18. Luca Longo

    Sorry: I made a mistake. The problem is the scaling of table’s column contained in a div with Width 100%.

  19. Sam Blowes

    This is possible to work around this I have just made a modification to this plugin to accommodate for fluid designs.

  20. Sam Blowes

    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;
    }
    
  21. Mat

    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

  22. BjΓΆrn

    Just what I needed –

  23. ben

    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:

    	<tbody>
    		<tr class="first">
    		  <td colspan="6">Holtsville</td>
    		</tr>
    		<tr>
    		  <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>
    	</tbody>
    
  24. Sam Blowes

    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:

    
    		
    		  Holtsville
    		
    		
    
    		  Holtsville
    		  NY
    		  00501
    		  40.8152
    		 -73.0455
    		  Suffolk
    		
    
    	
    
  25. Jon Kruger

    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.

  26. Adam Daughterson

    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!

  27. bln

    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

  28. Fuxi

    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

  29. Sean LeBlanc

    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?

  30. Fuxi

    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

  31. Vaibhav

    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

  32. mg

    Nice plugin!

    If it could include Sortable Headers
    and Pagination, then it would be really cool.

  33. Justin

    Nice job! I was looking at a number of plugins claiming to do what yours does and they all fell short.

  34. JoeFlash

    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

  35. ikaiser

    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.

  36. ammah

    Hello,
    It is a wonderful plug-in. However it doesn’t work when we have colspan and it’s regrettable.

    Best regards
    ammah

  37. FD

    @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:

    Private Sub gvMyGridView_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles gvMyGridView.PreRender
    gvMyGridView.HeaderRow.TableSection = TableRowSection.TableHeader
    End Sub

  38. lam do

    Any possible to make this to work with fluid layout when resize window the width also resize?

    great plug in

    thanks

  39. raven

    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.,

  40. Larry Woods

    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

  41. Larry Woods

    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!

  42. Larry Woods

    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?

  43. Romila

    Hi There,

    I want to have the both horizontal and vertical scrolls. How can i do that?

    Big help
    Have a gud day.
    R.

  44. todd

    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

  45. Jorgen

    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?

  46. Shao

    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

  47. Sudipto

    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.

  48. Markus Ernst

    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?

  49. sjc

    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

  50. sjc

    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!!!

  51. Ryan

    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.

    
    ...
    	// Bail out if there's no vertical overflow
    	if (!settings.alwaysWrap && $(this).height() <= settings.height)
    	{
    	  return this;
    	}
    ...
    	// public
    	$.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
    		alwaysWrap: false // if true, applies the wrapper regardless of whether the content exceeds the height
    	};
    
  52. Sudipto

    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!

  53. Sudipto

    I thing jQuery is not supported on IE 6.

    Am I correct? Please let me know…

  54. Ali

    Thanks Ryan! I looked for this function.

  55. Lukas

    Doesn’t work in jQuery dialog.

  56. Tim

    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

  57. ludovic Sauvage

    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.

  58. yair

    Hi
    Thanks,
    it is the only one I got to work
    eny idia how to set the to fix size with overFlow hidden?

    thanks

  59. missill

    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 ?! ^^

  60. Ashwin

    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?

  61. Leenix

    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.

  62. Leenix

    I found changing width:0px; on line 39 of the code resolved my issue.

    Hope that helps someone else.

  63. Deepak Kr Sharma

    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.

  64. ColdFusion Developer

    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!

  65. Collymitch

    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!

  66. Christian Magill

    Nice! I’d love to see a sort by column option as well.

  67. joshintosh

    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!

  68. David McFarlane

    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.

  69. ramana

    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}); 
    			}
    		}
    	});
    });
    
  70. Gary

    Its a great plugin…
    How can i make this work with live or livequery, any ideas?

  71. Gary

    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});
    	});
    });
    
  72. Brian

    You really helped me out here, thanks!

  73. borconi

    @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});
    			}
    		}
    	});
    });
    
  74. Ara

    I am having the same problem as @ramana.. The headers won’t align properly with the data…

  75. Thomas Huber

    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));
    }
    
  76. magnus

    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?

  77. Adriano

    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

  78. jon simcox

    this is a great tool, but the scrollbars are not visible on the iPad and therefore it does not scroll.
    any ideas why?

    thanks

  79. vxd

    Is there a way to lock the first 2 columns?

  80. Aslam Doctor

    Awesome plugin, Thanks

  81. bob

    can you set the columns to a specified width?

    thanks!
    Bob

  82. Dan

    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

  83. ViP

    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.

  84. ViP

    Please see the code for my previous comment/ question:

    x
    y
    z

  85. Jacob

    @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!

  86. rufus

    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.

  87. Jacob

    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!

  88. Derick Ablong

    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

  89. RaphaΓ«l

    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 ?

  90. rufus

    My alignment issue was caused by borders. They need to be consistent in the and .

  91. Cman

    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?

  92. Purna

    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.

  93. David Phillips

    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…

  94. iand109

    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?

  95. CineWeekly

    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

  96. sandeep

    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

  97. GT

    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;
    }

  98. RaBe

    Any idea how to get an event if last row is reached to load more content?

  99. Sam Blowes

    @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

  100. Russell Jacobs

    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.

  101. Gary

    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

  102. Nitish

    If the table is in another AJAX page then which function to of jQuery to call while getting the response from the home page?

  103. Greg Blass

    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…

  104. Stryder

    Hi,

    It works good on my page. n1 work πŸ˜‰

    But .. how can i get the scrollbarTop?

  105. Alex

    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.

  106. Tester

    IE shows Syntax-Error already on this demo-page so this plugin got kicked out of further evaluation right away!

  107. Frido

    Safari
    Version 5.1.6
    Works

  108. yair

    hi

    i have a big gap between the thead and the tbody on IE

    on FF end chrom it work good

  109. xry

    Hi, can you change the code and make the first column fixed while horizontal scrolling?

    Thanks.

  110. Ravindra Ahar

    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.

  111. jitendra sherchan

    Please check in IE when there is only one row in the table… scroller gets messed up….

  112. Amar Kapadia

    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?

  113. Packer

    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.

  114. James

    Very nice, however doesn’t work with colspans in the Header (Multi-row header leading with some colspans)

  115. JAAN

    Hi, this plug-in is great, but it hides the tableΒ΄s border, how can i solve this (i think) issue.

    Thankss

  116. FS

    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

  117. Karl

    There is an issue when the table does not have enough rows in it to force a scroll. Then it does not work.

  118. Travis

    Does anyone know if this works on ipad?

    Thanks!

  119. Travis

    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!

  120. Mike

    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.

  121. Vishnu

    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

  122. Jacob

    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?

  123. Rohan

    Would it be possible to use this for horizontal scrolling as well ?

  124. jurlala

    not working in colspans

  125. KLM

    This is broken in query-1.9.

  126. Janke

    when I reapplie the function, he resize well the body table, but don’t resize the header.
    Tested on IE6, IE9, FF.

  127. kvibbertj

    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.

  128. Gary

    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

  129. texas-bronius

    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!

  130. Max

    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