143 responses to “jQuery Scrollable Table Plugin”

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

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

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

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

  5. rufus

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

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

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

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

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

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

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

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

  13. RaBe

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

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

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

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

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

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

  19. Stryder

    Hi,

    It works good on my page. n1 work ;)

    But .. how can i get the scrollbarTop?

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

  21. Tester

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

  22. Frido

    Safari
    Version 5.1.6
    Works

  23. yair

    hi

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

    on FF end chrom it work good

  24. xry

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

    Thanks.

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

Leave a Reply