Jaimon's Blog

Making Scrollable Tables with fixed headers – Updated

This post is an update to my previous post on making scrollable tables with fixed headers. I’ve had a few requests for adding additional functionalities, and I thought instead of cluttering the old post, I’ll do a new one for the updated script.

What’s new?

  • Multiple tables on a single page
  • Multiple header freezing
  • Column freezing
To see it in action, please click here.

Implementation

  • Download the file fxHeader_0.6.min.js and copy to your folder (An uncompressed fxHeader_0.6.js is also available)
  • Include the above file in your HTML page
      <script src="fxHeader_0.6.min.js" type="text/javascript"></script>
  • Just before body end tag (</body>), add these lines,
<script type=”text/javascript”>
fxheaderInit(‘dataTable1’,200,2,2);
fxheaderInit(‘dataTable2’,200,2,0);
fxheader();
</script>
Call fxheaderInit for every table you want to add scrolling. fxheader() is only required to call once.
Attributes for fxheaderInit function
  • Table id
  • Height (in pixels)
  • No. of rows to freeze
  • No. of columns to freeze

Width will be taken from the table’s width attribute, so make sure the table you’re passing in has got a width attribute. If width is specified in percentage, it will be calculated in regards to width of the document body, and not of the containing element (ie parentNode). Since width will be changed on window resize, fxheader() function will be attached to window.onresize, if any of the table’s width is specified in percentage. If your existing code has reliance on window.onresize event, please amend the fxHeader.js file.

If your table is generated by a framework like JSF or ASP.net, you’ll need to avoid any possible ID collision as discussed on my previous post.

Cheers,

Jaimon

Advertisements

March 19, 2010 - Posted by | Uncategorized | , , , , ,

148 Comments »

  1. Dear Jaimon,
    The script is working fine for FF2,IE7 and Chrome4 but for IE6 if I assign table width 100% it goes out of the page(window scroll appears).

    Comment by Manohar | March 22, 2010 | Reply

  2. Dear Jaimon,
    In FF2 fixed column does not scroll vertically.

    Comment by Manohar | March 22, 2010 | Reply

  3. Hi Manohar,

    I only tested it with IE7/8, FF3.5 and Chrome before.

    Anyway, I’ve fixed the issues with IE6 and FF2 and have upated the post to reflect the new files. There is still a small issue with the IE6, where it shows a very small gap between two tables. Anyway, please take a look and let me know how it works for you.

    Thanks,

    Jaimon

    Comment by Jaimon Mathew | March 22, 2010 | Reply

    • Dear Jaimon,
      Thanks, Now it is working in IE6.
      In FF2 fixed columns are not scrolling.

      Comment by Manohar | March 23, 2010 | Reply

      • Hi Manohar,

        In my FF2 (Version 2.0.0.20), it is working fine. I can’t fix something I can’t reproduce. In any case, you have the full code to debug/fix the issue..

        HTH

        Jaimon

        Comment by Jaimon Mathew | March 23, 2010 | Reply

  4. Has anyone successfully implemented form items within the table itself?? IE won’t show a selection in a select box in the fixed left column and Firefox won’t show a checked radio button in the body of the table. HTML View Code shows that the html is showing the options.

    Comment by Heather | March 23, 2010 | Reply

  5. Dear Jaimon,
    By using this script can we also fix the footer of the table?

    Thanks.

    Comment by Manohar | March 23, 2010 | Reply

  6. Hi,
    I was using the old version of your fxHeader1 and fxHeader2 scrips on my site (depending on table size) and I recently noticed that when I added a second header row it wasn’t fixed. It was a nice surprise to find you have already been working on this, however the link to fxHeader_0.1.js appears to be timing out..

    Could you point me to somewhere I can find the script?

    Thanks a lot for this awesome script!
    Jan

    Comment by Jan | March 24, 2010 | Reply

  7. Hi Jaimon,
    I was really struggling to make columns and headers both freeze and your script works great. I am having a minor issue with resizing. I have an outside table with a width of 100% and the table I am controlling with your script is nested within that table and has a width of 85%. When I resize from full screen to any smaller size, the frozen columns stay put but the rest of the columns line up under the frozen columns as if receiving a . When I resize back to full screen, the columns again line up properly. Note that there are about 20 non-frozen columns so there is horizontal scrolling as well as vertical. I am using IE7 and ASP. Any suggestions would be much appreciated.
    Thanks,
    Mike

    Comment by Mike | March 29, 2010 | Reply

    • Hi Mike,

      Create an HTML/CSS/JS only pages to re-create this issue and send that to me (mail at jaimon.co.uk), and I’ll take a look..

      Jaimon

      Comment by Jaimon Mathew | March 29, 2010 | Reply

  8. Hi Jaimon,

    Your Script was excellent. I was searching like mad for this functionality. You saved me. I had only one issue when I use Rowspan, I am getting white space below the headers. Can you please help me to fix that problem?

    Thanks,
    Prabhu

    Comment by Prabhu | April 1, 2010 | Reply

    • Hi Prabhu,

      At the moment I’m taking a sum of one column’s offsetHeight in every fixed header row to calculate the total height required for the header table. With rowspan, this value will not just be the height of one row, causing the issue you’ve mentioned. I think instead of taking the offsetHeight of a particular column, if we get the lowest offsetHeight of all cells in a row, that might do the trick. Give it a try, and see if it works.

      HTH

      Jaimon

      Comment by Jaimon Mathew | April 1, 2010 | Reply

  9. Hi there,

    Great script but I think there are a couple of errors with the script I noticed that lines containing can cause problems:

    In my table w never gets a width and hence it’s ”
    var w = tbl[i].swidth + ”;

    So if w = ” then (w-18) will cause problems
    tbDiv.style.width=(w-18)+’px’;

    There are two other places where this occurs, can you tell me if this is really a bug? or am I doing something wrong?

    Regards DotnetShadow

    Comment by Dotnetshadow | April 21, 2010 | Reply

    • Hi,

      Its not a bug as such..
      I’ve mentioned that you’ll need to specify the table width in absolute value or as a percentage of body width.

      HTH

      Jaimon

      Comment by Jaimon Mathew | April 21, 2010 | Reply

  10. Thanks for that I must of missed that part

    Comment by Dotnetshadow | April 23, 2010 | Reply

  11. I’m getting the following script errors in IE8.
    I’m also getting a double header (my header row is listed twice only in IE8)

    Line 119
    Error Invalid Argument
    c[q].style.width=c2[q].style.width=(oc[q].offsetWidth-3) + ‘px’;

    Line 2005
    Error: Object doesn’t support this property of method
    fxheader();

    Comment by Greg | April 30, 2010 | Reply

  12. Thanks for the update.

    Comment by DR_CHAOS | May 5, 2010 | Reply

  13. Hi! I’m using IE6 and I’ve got the same problem as Manohar. The scroll bar of the table is just behind the page scroll bar. I have to scroll horizontal first to make the table scroll bar visible. How can I avoid this? Thanks a lot!

    Comment by Thomas | May 17, 2010 | Reply

    • Hi Thomas,

      If you can send me a very minimal reproducable test case, I’ll take a look..

      HTH

      Jaimon

      Comment by Jaimon Mathew | May 17, 2010 | Reply

      • If I set the table width to 98% its perfect. But then it looks quite ugly in FF3.6. I don’t understand it because in your code you are substracting 18 pixels in order to show the scroll bar in IE6.
        I stripped my page so it has only one 100% width table left. But it does not solve the problem unfortunately. There is too much Struts code inside to give you a minimal test case as you requested.

        Comment by Thomas | May 18, 2010 | Reply

        • With Jaimon’s help the solution for my problem is as follows:
          If using IE6 make sure to use the XHMTL Strict Doctype definition in your HTML page:

          <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

          Thomas

          Comment by Thomas | May 18, 2010 | Reply

          • Transitional XHTML Doctype should also work..

            <!DOCTYPE html
            PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
            “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

            HTH

            Jaimon

            Comment by Jaimon Mathew | May 18, 2010

          • No Jaimon, Transitional XHTML Doctype does NOT work. I’ve tested it on IE 6.0.2900 SP3. You have to use the Strict Doctype.

            Comment by Thomas | May 20, 2010

  14. Hi! Thanks for your script! It is partly working in my program…. the scroll bar appears and the original headers are hidden, but it seems the header container is not appearing…

    I’m new to web programming so I am a little lost as to how to tweak this or find the problem.

    Thanks for your help!

    Comment by Natalie | May 26, 2010 | Reply

    • Hi,

      As always, if you can send me a very minimal html which replicate the issues, I’ll certainly have a look.

      Thanks,

      Jaimon

      Comment by Jaimon Mathew | May 29, 2010 | Reply

      • Natalie and Jaimon. I was having the same issue and I just made it work by eliminating some code on the function addScrollerDivs.

        Originally is this:

        sd2.innerHTML=’Please wait while loading the table..’;

        sd2.innerHTML=’Please wait while loading the table..’;

        I replaced the width:9999px with width:auto and that seemed to fix my issue.

        I hope this help you out

        Comment by Juan | June 7, 2010 | Reply

  15. Hi Jaimon,
    Hope doing well,
    I have used fxHeader_0.2.js file, Its really helped me a lot for fixing Grid header. I am able to fix the grid header with vertical & horizontal scroll’s as per my requirement.
    But now I am facing two issues.

    —————————————————————————————–
    – CB – State_ID – Analysis – – –
    – – – Date – – –
    —————————————————————————————–
    – CB – Some Text Crossing – 01/06/2010 12:00:00 – –
    —————————————————————————————–
    – CB – Some Text Crossing – 01/06/2010 12:00:00 – –
    —————————————————————————————–
    – CB – Some Text Crossing – 01/06/2010 12:00:00 – –
    —————————————————————————————–
    – CB – Some Text Crossing – 01/06/2010 12:00:00 – –
    ———————————————————

    In above table structure you can see, header is having one check box (CB) for select all action, State_ID column and Analysis Date.

    1. header cell(td) width is not adjusting to row->td cell with automatically.
    I mean If i do nowrap on tr->td cell contents what ever the length TD cell arrages as single line text for that lengt that TD’s header cell right border also should come
    You can see For State_ID header content is ‘Some Text Crossing’
    2. the other issue By clicking on Select All Check box(CB) on header row, I am calling a JS function for onclick event, in which I am trying to get header checkbox object(CB)’s value(checked/unchecked,i.e true/false), but always object is coming as null.
    In two ways I tried,
    Header Checkbox ID is ‘selAll’ in table

    var isChecked = document.forms[‘actionForm’].elements[‘selAll’];

    Or

    var isChecked = document.getElementById(“selAll”);

    If(isChecked.checked){
    Code for getting all row’s check boxes and checking/unchecking.
    }

    My problem is after I am unable to get the Header checkbox object, Please could you tell me the way how to handle it.

    finally One more issue was, I want to fix the first column(Check box (CB)) of table, As this is a very big table with horizontal & vertical scrolls, user can navigate to right most side of the row, As we will fix the checkbox column, So at any time user can check any record.

    But even though I have passed no of column parameter(1) to your js function, i.e
    function(_tid,_sheight,_noOfRows,_noOfCols)
    Its not handling properly.
    So I am getting the checkbox column as seperately in one block, down to that remaining table is getting placed, I want this along with the table with proper alignments..

    Also If header columns text having spaces between (ex: Analysis Date), It should not come to next line.(This could apply for only header not for rows data)
    Please could you helpme out in this…

    Thanks
    Gopal

    Comment by Gopal | June 1, 2010 | Reply

  16. For clear understanding… if you could give me your email id, I can send the screenshot of my table and also the code(If required).

    Comment by Gopal | June 1, 2010 | Reply

    • Hi Gopal,

      It is mail at jaimon.co.uk

      Jaimon

      Comment by Jaimon Mathew | June 1, 2010 | Reply

      • Hi Jaimon Mathew,
        I am using fixHeader script. This is great script. But i have one problem with this script.
        In scrollable part checkboxs not working. i.e The checkboxs are unable to checked/unchecked with javascript.
        I think below code is not working with fixHeader script. But is is working without ‘fixHeader’ script.
        document.getElementById(‘chk1’).checked = true;
        document.getElementById(‘chk1’).checked = false;

        Could you please tell me how to checked the checkbox through javascript .
        Please reply me ASAP

        Thanks,
        pvkk

        Comment by pvkk | May 5, 2012 | Reply

        • Hi, like I’ve mentioned in other replies, you will need to assign new ids for these cloned input check boxes you’re seeing on the page. See the ADF faces example in my original blog for code samples. Once you’ve that, you could use the new ids in your code instead of ‘chk1’.

          HTH

          Jaimon

          Comment by Jaimon Mathew | May 6, 2012 | Reply

  17. First of all, THANK YOU VERY MUCH.

    I’m developing a RoR application and your script is exactly what I was looking for.

    There is only one issue and I’m sure you can help me. It works perfectly in all browsers but IE.

    I’m getting a js error triggered by prototype.js. Something in your scripts seems to be calling:

    function evalScripts() {
    return this.extractScripts().map(function(script) { return eval(script) });
    }

    And it fails giving me “Object doesn’t support this object or method”

    Do you have any idea what is going on?

    Thanks in advance.

    Comment by Juan | June 1, 2010 | Reply

    • Hi Juan,

      I’m pretty certain, fxHeader script doesn’t call the method you’ve mentioned 🙂

      Having said that, when this script is used with other frameworks like prototype, care should be taken not to interfere with each other. Although I’ve tried to do the script as self contained as possible (i.e. without global variables etc.), it still hooks to some global events like window.onresize. If prototype is also depend on these, you might need to change fxHeader accordingly.

      HTH

      Jaimon

      Comment by Jaimon Mathew | June 2, 2010 | Reply

      • Jaimon:

        Again thanks in advance for youe help. I’m a Data Architect converted into web development and javascript is not exactly my forte.

        I tried to add some alerts to troubleshoot my issue and this is the piece of code in prototype that is causing the error on ie.

        function extractScripts() {
        var matchAll = new RegExp(Prototype.ScriptFragment, ‘img’),
        matchOne = new RegExp(Prototype.ScriptFragment, ‘im’);
        return (this.match(matchAll) || []).map(function(scriptTag) {
        return (scriptTag.match(matchOne) || [”, ”])[1];
        });
        }

        this.match(matchAll) returns proper data, but it seems like the issue is with the rest of the code, any idea?

        Thanks a lot

        Comment by Juan | June 3, 2010 | Reply

        • Jaimon, I just wanted to let you know that I make it work on ie, the issue of course was that I wasn’t sending the width.

          I was setting the width on my css, but it seems like the width is required on the declaration of the table itself.

          Now is almost 100% working,I’m just missing the headers.

          Thanks

          Comment by Juan | June 4, 2010 | Reply

          • Hi Juan,

            In response to Ellary’s comment, I’ve actually updated my script to read width from CSS, if width isn’t specified in table’s width attribute.

            Jaimon

            Comment by Jaimon Mathew | June 7, 2010

          • Thank you, as I replied on a previous comment, I replaced the width 9999px to auto and that helped me out to show the headers

            THANKS A LOT

            Comment by Juan | June 7, 2010

  18. I am using your script with an asp.GridView (Visual Studio 2008). The GridView, HeaderStyle and RowStyle all specify Width=”975px”. But The script is generating a width of 9999px. The GridView is in a table cell with a width of 998px and the table has a width of 1000px.

    What could be causing this?

    Comment by Ellary | June 2, 2010 | Reply

    • Hi Ellary,

      Thanks for using the script. As I’ve mentioned in the post, for HTML table generated by frameworks like ASP.net, ADF Faces etc you might need to tweak the script a bit to make it work. I’ve also provided a sample ADF Faces page to demonstrate this.

      Anyway, if you can send me the generated HTML page with very minimal data to reproduce the issue, I’ll certainly take a look..

      Jaimon

      Comment by Jaimon Mathew | June 3, 2010 | Reply

      • Hi Ellary,

        Like I’ve mentioned on my post, you’ll need to specify width in table’s width attribute and it should work. So from the HTML you’ve sent me, change the following line from

        <table cellspacing=”0″ cellpadding=”0″ border=”0″ id=”GridDetail” style=”background-color:White;width:975px;border-collapse:collapse;”>

        to

        <table cellspacing=”0″ cellpadding=”0″ border=”0″ id=”GridDetail” style=”background-color:White;width:975px;border-collapse:collapse;” width=”975″>

        HTH

        Jaimon

        Comment by Jaimon Mathew | June 3, 2010 | Reply

  19. I’m using Visual Studio 2008. My Gridview has a width specified but it gets generated in the style attribute. So I don’t know how I can generate a separate width attribute. In HTML 5 the width attribute is no longer available.
    Perhaps your script can be tweaked to look in either place?

    Comment by Ellary | June 3, 2010 | Reply

    • The new script works just fine.
      Thank you.

      Comment by Ellary | June 4, 2010 | Reply

      • Glad to hear that.. I’ve now updated the post to link to the new script files.

        Jaimon

        Comment by Jaimon Mathew | June 4, 2010 | Reply

  20. Hi! It’s a great job from you, many thanks! A few questions: it’s not working in IE8, just not showing the tbody; I would be gratefull if you can add a fixed footer functionality, too. Also, I can’t figure out how to add alternate background colors to the rows, especially with sorting added. I tried some scripts that just conflict with your. Sorry for my bad English, I am also a beginner in JS but have a static geographical site with too many big statistical tables, so this would be greatly welcomed to me! Thanks in advance!

    Comment by Victor Bulgar | June 5, 2010 | Reply

  21. How does your script handle column widths? Does it use those specified in the table or ignore them. If the table has no column widths specified, how does it size the columns?
    Thanks.

    Comment by Ellary | June 10, 2010 | Reply

    • Hi Ellary,

      As you can see from the script, I’m using offsetWidth method to read the column width. Unless you use a fixed table layout (table-layout: fixed) browsers will recalculate the column width to adjust the data being displayed. This is regardless of whether or not a column width is specified. If no widths are specified, it is up to the browser to calculate column widths, and it does differ from browser to browser.

      HTH

      Jaimon

      Comment by Jaimon Mathew | June 11, 2010 | Reply

  22. Hi, I have tried 2 or 3 different scripts for fix header with scrolling table. your script and technique work great with my enviroment. I am abled to adjust your code to have it work with ff and ie. I only have one problem. I try to center the table, then header will disappear. when I took the center alignment out, it work fine. Is there a way I can set the div center after scrolling table is set. Thank you.

    Comment by Henry Le | June 10, 2010 | Reply

    • Hi Henry,

      As always, send me a very minimal HTML to reproduce this issue and I’ll take a look..

      Jaimon

      Comment by Jaimon Mathew | June 11, 2010 | Reply

  23. It works, your fix work great for both ie and ff.
    Thank you.

    Comment by Henry Le | June 11, 2010 | Reply

  24. Hi Jaimon,
    Great appreciation to you for your work. If I could avoid having to deal with IE I would but alas, I cannot. IE-8 gives me the following error. Would you have an idea what might be the problem?
    Thanks,

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; InfoPath.2; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
    Timestamp: Fri, 11 Jun 2010 19:45:08 UTC

    Message: Invalid argument.
    Line: 80
    Char: 13
    Code: 0
    URI: http://katie.luther.edu/moodle-197/grade/report/LAEgrader/fxHeader_0.3.js

    Message: Object doesn’t support this property or method
    Line: 1334
    Char: 9
    Code: 0
    URI: http://katie.luther.edu/moodle-197/grade/report/grader/index.php?id=2

    Comment by Bob Puffer | June 11, 2010 | Reply

    • Hi Bob,

      Send me a minimal HTML file to reproduce the problem..

      Jaimon

      Comment by Jaimon Mathew | June 11, 2010 | Reply

  25. Hi Jaimon,
    Thank you very much for this wonderfull script. It performs correctly and is very stable. I use this table to load dynamic rows which could vary is number from no data returned to maybe 35-40 rows – never goes above that number.
    I am facing an issue in the HTML page wherein the height of the table keeps varying depending on the number of rows returned. Say for example, I set the table height at 450px in the HTML, then I call fxheaderInit(‘projectInfoTable’,650,1,0). The table that gets rendered on the screen, does not obey the height specified. Instead, it re-adjusts the height down to a lower value. This has the effect of making the GUI elements below this table to move up or down the screen. Is there some way of ensuring that the table DIV is fixed to the passed in height irrespective ?
    Thanks.

    Comment by Ajay | June 22, 2010 | Reply

    • Sorry, a small correction here. “Say for example, I set the table height at 650px in the HTML, then I call fxheaderInit(‘projectInfoTable’,650,1,0). “

      Comment by Ajay | June 22, 2010 | Reply

      • Hi Ajay,

        Thanks for using the script.. Table height adjustment as you’ve mentioned above is supposed to be a feature!. If you really want a fixed height box, then I would suggest using a div with fixed height around your table element.

        Something like,

        <div style=’height:650px;padding:0px;margin:0px;border:0px’>
        …<table>….
        …</table>

        </div>

        HTH

        Jaimon

        Comment by Jaimon Mathew | June 22, 2010 | Reply

  26. Hi Jaimon,
    Thank you very much for this wonderfull script.
    I am using fxHeader_0.3.js, In my html page, without using table width=”100%” , that time in IE script is not working properly, there its showing one error message like, ‘Please wait while loading the table..’. But the same time in Firefox it is working fine. So how can I fix this problem without using table width=”100%”. I have already send my minimum html file to your email address (mail@jaimon.co.uk), but I did not get any replay form you.

    Comment by Sreejesh | June 25, 2010 | Reply

    • Hi Sree,

      As I’ve mentioned on my post, you’ll need to specify a table width value for the script to work. And I’ve also have mentioned that any percentage width is calculated against the body offsetWidth and not of the parent container.

      In your case, something like,

      <table class=”data_table” id=”dataTable1″ width=”830″>

      You’ll need to make a very small change in the source code to change the width after fixing headers. I’ve used Javascript module pattern wherever possible to make variables private. As the array storing the width attribute (tbl) is not accessible from outside code, you’ll need to change its scope, so that it can be accessible from toggleDiv function. (ie. change var tbl=new Array(); to this.tbl=new Array(); )

      You’ll also need to change your toggleDiv method to set the width explicitly,

      Something like,

      if(document.getElementById('right_pannel').style.display == "block") {
      tbl[0].swidth='986';
      //rest of your existing code
      }else {
      tbl[0].swidth='830';
      //rest of your existing code
      }

      HTH

      Jaimon

      Comment by Jaimon Mathew | June 25, 2010 | Reply

      • Hi Jaimon,
        Thanks for your helpful reply, I have one another doubt, if I need to use two table in a perticular html page, that time how I will set the width?

        Comment by Sreejesh | June 25, 2010 | Reply

        • Hi Sree,

          Like I said, tbl is an array, so use tbl[0].swidth for the first table and tbl[1].swidth for the second table.

          HTH

          Jaimon

          Comment by Jaimon Mathew | June 25, 2010 | Reply

  27. Hi Jaimon,

    I made several posts that I no longer see. Did I inadvertently delete them? Let me know.

    I have been spending far more time getting fixed headers working and your solution works great for IE8 and is close for IE7 and FF3.

    The key points of my post are I am using VS2005, ASP.net and VB.net utilizing a GridView. As far as I can tell there are no name collisions. The grid control code is:

    GridView ID=”TimeGridView” runat=”server” AllowSorting=”False” AutoGenerateColumns=”False” Height=”315px” Width=”935px” saveButtonID=”SaveButton” ShowHeader=”True” DataKeyNames=”EmployeeNo,Name,Company Code,Location,PayGroup,PayDate” OnDataBound=”TimeGridViewDataBound” DataSourceID=”SqlDataSourceTimeGridView” OnRowDataBound=”TimeGridViewRowDataBound” OnRowUpdating=”TimeGridViewUpdating” OnRowUpdated=”TimeGridViewUpdated” ShowFooter=”true” BorderColor=”#E7E7FF” BorderStyle=”None” BorderWidth=”1px” CellPadding=”3″ GridLines=”Horizontal”

    HeaderStyle BackColor=”#E7E7FF” ForeColor=”#4A3C8C” Font-Bold=”True”

    FooterStyle BackColor=”White” ForeColor=”CadetBlue” Font-Bold=”True”

    RowStyle BackColor=”#E7E7FF” ForeColor=”#4A3C8C”

    PagerStyle BackColor=”#E7E7FF” ForeColor=”#4A3C8C” HorizontalAlign=”Right”

    SelectedRowStyle BackColor=”#738A9C” ForeColor=”#F7F7F7″ Font-Bold=”True”

    AlternatingRowStyle BackColor=”PowderBlue”

    /GridView

    The invokation of the script right before the /body tag in a script tag is as follows:

    fxheaderInit(“TimeGridView”,315,1,1);
    fxheader();

    The specific problems are:

    1) IE7 the header literals are hidden. In the view source the th tags are present, but the header area shows just the background color.

    2) In FF3.0.16 and 3.6.6 the first column is fixed; however, the remaining columns show below the last data row.

    Thanks,
    David

    Comment by David | July 4, 2010 | Reply

    • Hi David,

      Your posts weren’t lost, its just that, I need to aprove them for to appear here.

      Regarding the issue, send me a very minimal HTML file to reproduce your issue and I’ll take a look..

      HTH

      Jaimon

      Comment by Jaimon Mathew | July 5, 2010 | Reply

  28. Jaimon,

    Thanks for looking into this for me. Below is the html code that is failing with IE 7. I will tackle FF 3.6.6 later. I apoligize for the length of the post, but I did cut the post down from 64K to 32K…

    Employee Time Sheet

    function MM_reloadPage(init) { //reloads the window if Nav4 resized
    if (init==true) with (navigator) {if ((appName==”Netscape”)&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
    else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);

    function warnUser()
    {
    if (confirm(“There has been no activity for some time.\nClick ‘OK’ if you wish to continue your session, \nor click ‘Cancel’ to log out.\nFor your security if you are unable to respond to this message\nwithin 2 minutes you will be logged out automatically.”))
    {
    // pos the page to itself
    document.location.href = ‘TimeGrid.aspx’;
    }
    else
    {
    document.location.href = ‘TimeSessionTimeout.aspx’;
    }
    }

    NameRegularOvertimeVacationBonusBereavement_05

    George, King *****

    Eliz, Queen *****

    Henry, Prince*****

    Charles, Prince *****

    Diana, Lady*****

    Albert, Hall *****

    Tower, London *****

    Thames, River *****

    Buckingham, Palace*****

    TOTALS0.00000.00000.00000.00000.0000

    &nbsp

    //

    fxheaderInit(“TimeGridView”,315,1,1);
    fxheader();

    Thanks,
    David

    Comment by David | July 5, 2010 | Reply

  29. Jaimon,

    I saw my last post above, but I noticed all the html was gone. Do you see it? If not, is there a “trick” to post html to your blog?

    Thanks,
    David

    Comment by David | July 5, 2010 | Reply

    • Hi David,

      Send the HTML to my email id – mail at jaimon.co.uk

      Jaimon

      Comment by Jaimon Mathew | July 5, 2010 | Reply

  30. Hi Jaimon,

    This is best script I’v found to create fixed headers on html-tables. For my specific situation is misses 2 important features, the first being able to have a dynamic height and the second that the width of a ‘100% width grid’ is calculated on the body and not on the parent of the table.

    The last issue I’ve fixed by adding an offsetWidth that is subtracted from the body offsetWidth, in that way I can compensate for paddings and margins of parent elements.

    Changed source:

    (function() {

    function gbw(wOffset) {
    return document.body.offsetWidth ? document.body.offsetWidth – wOffset : window.innerWidth – wOffset;
    }

    this.fxheader = function() {

    for (var i = 0; i = 0) {

    w = (gbw(tbl[i].wOffset) * twi / 100);

    }

    }

    }
    this.fxheaderInit = function(_tid, _sheight, _noOfRows, _noOfCols, _wOffset) {

    tb.wOffset = _wOffset || 0;

    };
    })();

    If you want I can email the code changes also.

    Do you have any plans to add more features or make new release with features others like myself are adding?

    Regards,

    Jochen

    Comment by Jochen Jonckheere | July 15, 2010 | Reply

  31. Hi Jaimon,

    It works reasonably well… vertical scrolling works,
    horizontal scrolling works, only the column headers are slightly off versus the rest of the table – i.e. the header columns have different sizes versus the data columns… I took a look at your js code but could not find any obvious errors, it might be a subtle problem. The vertical alignment is perfect.

    This bug shows up in Internet Explorer 8 & Firefox 2 (which are the only two browsers I have tested)

    Comment by Alex S. | July 23, 2010 | Reply

    • Hi Alex,

      Can you change the fixed width I’m offsetting against table cell paddings/borders in fxHeader source file? (In line 119 and 123 in fxHeader_0.3.js)

      I’ve just changed that to 10, and that works for the example you’ve sent me. Give it a try.. May be I should take this value as a parameter on fxHeaderInit.

      HTH

      Jaimon

      Comment by Jaimon Mathew | July 23, 2010 | Reply

      • Works with these changes… thanks!

        Comment by Alex S. | July 29, 2010 | Reply

  32. Jaimon,
    Nice work – very useful. Is there a way to suppress the horizontal scroll-bar? The horizontal scroll-bar always appears, even though I don’t need it. Vertical scrolling is all that I need. Thx

    Comment by Stan Jordan | July 30, 2010 | Reply

    • Hi Stan,

      Do you get horizontal scroll bars on my example page as well? If not, as mentioned in some of the previous comments, please try setting the DOCTYPE to xhtml.

      HTH

      Jaimon

      Comment by Jaimon Mathew | July 30, 2010 | Reply

  33. Jaimon, Good post, new to javascript, how do I implement this line in your example” Call fxheaderInit for every table you want to add scrolling. fxheader() is only required to call once.

    thanks

    Comment by Terry | September 1, 2010 | Reply

  34. Hi Jaimon,

    I was looking @ the samples & implementation. These are very helpful & the I must say the solution is fantastic. The only issue I have is the form elements. My ASPX page is like, I have dropdowns (with AutoPostBack set to true) in the header in both the fixed header & the scrollable header. When I change the values the dropdowns, the page gets reloaded & re-query the DB then display the appropriate results in the table. When I place the dropdowns & change the values, the page reloads & I get the desired results in the table (this is all .NET & I have handled it). BUt the selection is lost in the dropdowns. I understand cloning needs to be done for these dropdowns. But I’m new to javascript & was not able to do it. I did go thru the link https://jaimonmathew.wordpress.com/2010/02/02/scroller/ that has the info on ADF faces, but was nto able to do it.

    Can you plz help me do this? I really need this & I have a demo in a couple of days.

    Thanks
    Bobbie

    Comment by Bobbie | September 7, 2010 | Reply

  35. hi Jaimon
    I would really appreciate if you could advice me in adding two scrollable tables with fixed headers using ADF or Trinidad tables.

    rite now the tables overlap or the second table wont have a header.

    thanks

    Comment by sam | September 7, 2010 | Reply

  36. Hi Bobbie,

    This happens as the user see/change the cloned drop down box and the orginal box’s value remain unchanged.

    A quick fix will be to add an onchange even handler to the cloned drop down box to set the original box’s value, and call any onchange event it may have.

    HTH

    Jaimon

    Comment by Jaimon Mathew | September 14, 2010 | Reply

  37. Hi Jaimon,

    I haven’t succeeded in making it work on a content page embedded on a master page in ASP.NET. I have the exact same code working on an ordinairy aspx. Have you encountered this before?

    Thanks

    Comment by Petter Asklund | September 23, 2010 | Reply

  38. I worked with Jaimon to get version 0.4 created to improve the LAEgrader plug-in for Moodle (http://moodle.org/mod/data/view.php?d=13&rid=4026). With his help we removed the vertical scrolling, so that we could just freeze the first 3 columns. Take a look at the example I have (http://courses.alma.edu/LAEgraderSample.php).

    I used: fxheaderInit(‘user-grades’,9999,0,1);fxheader();

    Another note, because my table was full of text input fields, I added the following to the fxHeader_0.4.js file to fix issues with form submission and tabbing between fields. Inserted at Line 25:
    var inputs = cf.getElementsByTagName(‘input’);
    for (var i = 0; i < inputs.length; i++) {
    inputs[i].tabIndex = null;
    inputs[i].name = null;
    inputs[i].disabled = true;
    }

    Thank you for all your help Jaimon!

    Sincerely,
    Larry C. Elliott
    Assistant Director
    Web Development and Network Security
    Alma College Information Technology

    Comment by Larry Elliott | September 23, 2010 | Reply

  39. Hi Jaimon,

    Forgot to mention the below in my previous post:
    1. On a content page all controls get a prefix on the clientid (but the functions are called with the right clientid’s of course).
    2. Since there are no body tag in the aspx content page, I have tried to put the calls to fxheaderInit() and fxheader() both a)in the content page itself, b) before the body tag in the master, and c) executed by a button click after the page has loaded.

    But no luck so far.

    Regards / Petter

    Comment by Petter Asklund | September 24, 2010 | Reply

  40. hi
    great script..

    1 small request.could you be able to provide us with a script to freeze header and footer both and scrollable body?

    Comment by sam | October 7, 2010 | Reply

  41. Jaimon,

    The demo page you provide works for IE8, Chrome and Firefox. However after a resize of the window the column headings in the tables with the fixed columns are off in Chrome and Firefox (latest versions of both).

    Comment by dan | October 21, 2010 | Reply

    • Hi Dan,

      Please try the new version (v0.6)

      HTH

      Jaimon

      Comment by Jaimon Mathew | November 17, 2010 | Reply

  42. Hi Jaimon,

    I am using Version 5 script. Its Working in IE8

    I’m getting the following script errors in IE7 and IE8(Compatibility View).
    I’m also getting a double header

    Line 127
    Error Invalid Argument
    c[q].style.width=c2[q].style.width=(oc[q].offsetWidth-3) + ‘px’;

    Thanks
    Udhay.

    Comment by Udhay | November 8, 2010 | Reply

    • Hi Udhay,

      As always, send me a very minimal reproducible HTML file, and I’ll take a look.

      Jaimon

      Comment by Jaimon Mathew | November 8, 2010 | Reply

    • Hi Udhay,

      The issue here is, when the script runs, table’s width is not populated. If you move the call to fxheader further down the line, (after the form end tag) it will work. Ideally scripts like this should only get called once the document ready event is fired.

      HTH

      Jaimon

      Comment by Jaimon Mathew | November 9, 2010 | Reply

      • Hi Jaimon,

        Great jaimon.. Its working now.. Thanks

        Thanks
        Udhay

        Comment by Udhay | November 9, 2010 | Reply

  43. HI Jaimon,

    The impl is cool & efficient. I have an issue wherein I was not able to retain the dropdown selections after I do a form post. I looked @ you response to comment # 36. Can you plz give an example implementation for this? I tried all I could to do this. I’m a newbie to javascript.

    My requirement is that I have dropdowns in the table th tags & they have an onChange event associated with them. So if the value changes, the page reloads & the selected value has to be retained. Plz help me doing this.

    Thanks
    Prasad

    Comment by Prasad | November 22, 2010 | Reply

  44. Hi !

    Thank you very much for your script ! I work with very long table and you save my life. 😉
    Your idea to clone the table is very smart.

    On my web page, i would like to use anchor to reach specified lines in the table. But the classical link doesn’t work : its bring me to the good line… but on the fixed div ! !
    Is there a trick to use anchor in the scroll div ?

    Thanks for help, and many many thanks for your great work 🙂

    Comment by Fred | December 8, 2010 | Reply

  45. Hi,

    I have an issue regarding memory leaks. I have implemented the script on a table put inside an ajax update panel. The content of the table is generated from code behind. The fxheaderinit and fxheader functions are called from the PageRequestManager’s endrequest. I have tried to unwire the table objects client functions, and to clear the table by setting the innerhtml. But no luck. Do you have any experiance regarding this kind of implementation of your scripts. I have done my tests in Chrome.

    //Petter

    Comment by Petter Asklund | December 8, 2010 | Reply

  46. Hi Jaimon,
    I got a problem with this scrollable table.
    Sample table
    Group Name | Rank
    White_1 | 4
    Black_1 | 2
    White_2 | 5
    Red_1 | 10

    Let say I have 20 rows of data. When I do a search for “White” using ctrl+f in IE8. As expected, it highlights few words in few rows, however, my fixed header turn to one of the highlighted row. When I close the search bar/function, the fixed header still display my data row instead of the proper header.

    Comment by widjoyo | January 21, 2011 | Reply

    • Hi,

      It is a known issue and happens in IE and Google Chrome. Firefox seems to handle this without any problem. As it stands, I don’t know of any work around on this.

      Thanks

      Jaimon

      Comment by Jaimon Mathew | January 21, 2011 | Reply

  47. Hello! I have one question about your plugin. How can I easily change the width of the table? It is easy to change the height, but I need the different widths depends on the situation.

    Comment by Sofia | March 9, 2011 | Reply

    • Hi,

      Width is extracted from the table’s width attribute, or if one doesn’t exists, from the style.width attribute. So as long as you set the width correctly on your tables, it should work.

      HTH

      Jaimon

      Comment by Jaimon Mathew | March 9, 2011 | Reply

  48. Thank you very much!I have found the mistake!

    Comment by Sofia | March 9, 2011 | Reply

  49. Thank you so much for this fantastic solution!!!

    Comment by kot | March 31, 2011 | Reply

  50. Great script, one question/issue though: The width of the first column of the frozen header is about 1-2px narrower than the first column of the scrollable portion of the table. All the other columns do line up. It’s not a huge problem, more of a cosmetic eyesore. I’ve tried making small adjustments here and there, but nothing is making the first column width match. I’d be happy to send a screen shot if the description isn’t good enough. thanks!

    Comment by Tony | June 27, 2011 | Reply

    • Hi Tony,

      Are you using the correct DOCTYPE?

      Jaimon

      Comment by Jaimon Mathew | June 27, 2011 | Reply

      • I tried changing Strict to Transitional, but that didn’t change anything. I also tried the table in FF4 and the header width seems to span the table data + the vertical scroller.

        Here’s my doctype:
        !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”

        html xmlns=”http://www.w3.org/1999/xhtml”

        Comment by Tony | June 27, 2011 | Reply

        • Hi Tony,

          Send me a very small test file to reproduce this and I’ll take a look when I get a chance..

          Thanks

          Jaimon

          Comment by Jaimon Mathew | June 27, 2011 | Reply

  51. great script but i have one issue. I’m trying to set focus to one of the cells in the table using an onload command in the but ie gives me an error “object doesn’t support this property or method”. is there a way around this?

    thanks

    Comment by adam | July 19, 2011 | Reply

    • Hi Adam, because the script does a bit of rewriting, your original component may not be the one you see on the page. Use firebug, IE developer tool etc. find the component’s id and then use the new id to set focus to.

      HTH

      Jaimon

      Comment by Jaimon Mathew | July 30, 2011 | Reply

  52. Hi Jaimon,

    its really a nice solution for project on which its really become hard to accomodate some kind javascript framework.

    i had adopted your suggested solution in our project.

    but after applying the script , as per my requirement also i want to fixed one of the table column for horizontal scrolling.

    i had done that but in IE7 its creating some problem on the style of the fixed column header. its shows little bit clutter image.

    can you guide me what can be the issue ?

    Thanks
    Nirav Joshi

    Comment by Nirav Joshi | July 20, 2011 | Reply

  53. Hi Jaimon, great utility here, and working very well to show an excel spreadsheet in a table format. I have one small issue with IE9 where displaying more than 90 rows causes a weird “flickering” of content below the table when hovering over the bottom half of the table. This flickering causes content to push down farther on the page, but only for a split secon. The content below has buttons to continue on during a setup process, so this makes usability a little difficult. This only happens in IE9, not IE9 Compatiblity or other IE 9 browser modes. Trying to find out more information about IE9 related issues. Thanks for any feedback.

    Comment by CN | July 29, 2011 | Reply

  54. I have screenshots to illustrate this IE9 issue better, but not show how to upload them…

    Comment by CN | July 29, 2011 | Reply

  55. This is great plugin. Can you suggest how can I set the scrollable to the end of table? Thanks!!!

    Comment by usha | August 16, 2011 | Reply

  56. Love the scripts but have a question. I have a textbox in the header (for filtering on name) and for some reason on postback the contents of the text box get suffixed with ‘,,,’ (3 commas) and obviously my filter will not work as expected (few names end with 3 commas….;-)

    Any ideas?

    Comment by Garth | October 5, 2011 | Reply

    • Hi Garth,

      As the script will be cloning the contents, you will end up with two input boxes with the same ID, although one of them will be hidden from view. And I think that could be causing this weird issue. What you see on the page is the object created by the script, and not the original object rendered by the browser. What you could do is change the ID after cloning each row (ADF Faces code on my previous post has some examples) and then either use the new ID on server side to retrieve this, or copy the value to the original text box before submitting, so no change at server side.

      HTH

      Jaimon

      Comment by Jaimon Mathew | October 5, 2011 | Reply

  57. Hey there! Thank you very much for this walkthrough, it’s been very useful for my html pages. I’m wondering though, if I can incorporate it with a javascript that sorts by table headers, something like http://www.kryogenix.org/code/browser/sorttable/

    I’m tried incorporating both javascripts, but it seems your script disables the sortable headers. Any thoughts?

    Comment by titousConstantino | November 8, 2011 | Reply

    • Hi,
      As fxHeader script creates another table with the header rows, it won’t possible to use a generic script such as Stuart Langridge’s sortable without some modifications. There is a difference in loading strategy as well in our scripts. Because we end up with two tables, we need to add the header links for sorting in one table, and on clicking we should be sorting data from another table.

      Thanks

      Jaimon

      Comment by Jaimon Mathew | November 9, 2011 | Reply

      • is that something you can invision incorporating rather easily? i’m afraid that sort of modification goes beyond me. 😦

        Comment by Constantino | November 9, 2011 | Reply

        • I believe it shouldn’t take more than a couple of hours to do it for any experienced JS programmer and some cross browser testing..

          Comment by Jaimon Mathew | November 9, 2011 | Reply

  58. Jaimon:

    I’m having issues with the first row of data disappearing and the column freeze not set properly when in IE8 Standards mode.

    Also when in IE7 standards /Compatability mode, there is a small offset between the first unfrozen column and the last frozen column.

    I will send you a sample by email.

    Thanks again!

    Garth

    Comment by Garth | November 24, 2011 | Reply

    • Thanks again for your help with the scripts!

      Because my first row had cells with a rowspan >1 we changed line 131 to read:

      tHeight+=tbDiv.rows[j].cells[0].offsetHeight;

      so it would just use the first cell (which did not have a rowspan).

      Since I have a dynamic number of header rows I wanted to freeze (anywhere from 5 to 12 depending on the dataset), and some of those rows may have varying colspans we also changed line 142 as follows:

      cw += tbDiv.rows[tbl[i].noOfRows+1].cells[j].offsetWidth;

      so that the first line of “data” would be used to determine where to start the column freezing. (note this was only an issue in IE8 Standards mode).

      Thanks again!

      Comment by Garth | November 24, 2011 | Reply

  59. Hello,

    Brilliant script. Thanks.

    I have a pagination (infinite) script that works on one of my projects. As soon as the bottom of the div is reached the script loads more content.

    I am not sure how to determine when the bottom of the script is reached with your div. Can you assist?

    Regards,
    Clayton

    Comment by Clayton | January 6, 2012 | Reply

  60. Hello,
    the script is great. After trying out several methods – this finally worked! But I do have a couple issues.
    1. I have hidden rows longer in width than original rows. When I click Edit on the original rows in the table, the hidden rows appear and the header doesnt adjust. So several columns have no header now.
    2. this script, for some reason, blocks my sorting function.

    I would greatly appreciate your help/suggestions.

    Thanks,
    Nea

    Comment by Neha | January 13, 2012 | Reply

  61. Hello,
    The script works perfectly in my application. I would like to make the scroll bar on the page not visible to the user. How do I go about it in the script?

    Comment by Anand | January 24, 2012 | Reply

  62. Hello Jaimon,

    i’m using the ‘fxHeader_0.6.min.js’. Firstly congratulations for the job !

    If you can, i would like a help here:
    How to increase the width of the first column of the table (‘scroller:fxCH’ and ‘scroller:fxCB’) in IE ?

    In firefox, this inline CSS in works:
    ‘width:250px; display:block;’

    Sorry for the Google Translator english

    Thiago Sathler
    Rio de Janeiro – Brasil

    Comment by Thiago Sathler | February 2, 2012 | Reply

    • Hi Thiago,

      Can you try to add any element with 250px width to the first column? Something like a 1px high div element with no borders?

      Jaimon

      Comment by Jaimon Mathew | February 3, 2012 | Reply

  63. Hello,

    first I used the fxHeader2.js and I was very glad to find an script that worked in my grails application. But with IE9 I have two problems:

    1. I have a table with 10 columns and on changing positions I have the effect that a cell is omitted. The remaining cells are shifted to the right so that there is an additional column at the end of the row. The HTML-code looks fine and with Firefox it works fine, too.

    2. Then I tried the fxHeader_0.6.js. The problem remained and now the scrollbar is not connected to the table but extremly outside of the view, although I use a fixed width=”600″ at the table.

    What could be causing this?
    Thanks, Karen

    Comment by Karen | May 7, 2012 | Reply

  64. Question:

    I have a table that includes a column of checkboxes (all dynamically generated) that is inside the scroll container. The idea is that the user selects 1..n rows via the check boxes and then clicks a button to continue. The button simply fires some javascript to toggle the display of a different div which is outside the scroll container.

    The problem I get is that when the javascript fires it de-selects all my checkboxes. BTW this is only an issue when the javascript being run changes the display of the div (either by className or by changing the style.display attribute of the div). If I run a simple alert in the javascript, then there is no change in the checkbox state.

    Any thoughts?

    Comment by Garth | July 4, 2012 | Reply

  65. […] <SCRIPT LANGUAGE='JavaScript'> /* * @Author Jaimon Mathew http://www.jaimon.co.uk * Please see jaimonmathew.wordpress.com/2010/03/19/making-scrollable-tables-with-fixed-headers-updated-2/ */ (function() { var flag=false; var tbl=new Array(); this.ge$ =function(d) {return […]

    Pingback by Proxy Servers » Spans jumping around on resize and/or zoom | August 5, 2012 | Reply

  66. Hi Jaimon, thanks so much buddy.
    It works like a charm in IE8 and FF14.
    Jaimon, I have a question to ask you sir.
    For example, row is my table’s id. So I call:

    fxheaderInit(‘row’,150,1,0);

    Now, I need to use jQuery to call function scrollingTop() to force the scrollbar go down to the position I need.
    I tried to call id of the div container of the fixed header table but I didn’t succeed.
    If I remove the following code above (not fixed header), it works (scrollbar jump to the position I want)
    Please let me know how can I keep fixed header and still manage to control the scrollbar?

    Thanks so much Jaimon and other friends.

    Best regards,
    Khanh Tran

    Comment by Khanh Tran | September 12, 2012 | Reply

  67. Hi jaimon, need your help. I was using the old fxheader1.js. I have a specific requirement like the vertical scrollbar will only appear if the table row data is overflowing the page height. But if all the table rows can be rendered within the page height then i dont want to show the scrollbar.

    fxheaderInit(‘dataTable’,300); //basically dont want to pass this height.

    can you help?

    Comment by sukalyan | September 17, 2012 | Reply

  68. Hi Jaimon – I’ve been trying to get your script to work but for the life of me can’t get the cell widths of the header to line up with body of the table (nor the fixed first column). I’ve tried explicitly setting the width of each head and table cell (and set table-layout to fixed) and the script over-rides the values. I’ve tried not setting any of the widths, figuring that the script would figure out the correct widths based on the widest cell in a table, but the header has equally-sized cells that don’t match up with the variously sized body cells. It seems that the fixed header cell widths are set completely independently of the body cell widths despite what I see in the demos. I don’t understand the script well enough to understand how your widths are set but I’m hoping you can shed some light on this issue so I can track down the source of problems. Thanks so much!

    Comment by Lynnwood Brown | September 20, 2012 | Reply

    • What DOCTYPE are you using? If it’s HTML or no doctype defined, can you try it with an XHTML one?

      Comment by Jaimon Mathew | September 20, 2012 | Reply

      • Thanks so much for the follow-up Jaimon! The doctype was plain HTML. I tried an XHML declaration but it made no apparent difference. Just to help me eliminate some variations, does your script care whether the cell sizes are defined (either in the element or css), or whether table-layout is set to fixed? Is the script suppose to determine the width of the header cells based on the widest cell in that column? Thanks again!

        Comment by Lynnwood Brown | September 20, 2012 | Reply

        • Send me a small sample to recreate the issue, and I’ll take a look.

          Comment by Jaimon Mathew | September 20, 2012 | Reply

          • I could send you a copy of the rendered html but I could not find any contact email address on your site or in the email I received. Perhaps send me a direct email with your contact info. Cheers – L

            Comment by Lynnwood Brown | September 20, 2012

  69. Excellent code. I’m running it with an HTML5 doctype on FF4 and IE8 with only minor problems.
    Thank you for developing it, it saved me a ton of headaches.

    Comment by Bob | December 21, 2012 | Reply

  70. (hopefully the world doesn’t end today because I just got it working perfectly….)

    Comment by Bob | December 21, 2012 | Reply

  71. Hi Jaimon,

    I have an issue while using the plugin in asp.net grid view with edit template. On the initial grid bind the plugin is working properly, but we try to edit any records after the post-back occurred the js stopped working with an exception “Object required on line no 41”. I added the method calls in Page_PreRender still have same issue. Please help me to sort it out.

    Comment by ed | August 22, 2013 | Reply

  72. Hi,
    Can you please add code for freezing the footer of the table

    Comment by Subh Dey | January 31, 2014 | Reply

  73. body, .mt {padding:0px;font-family: Tahoma, sans-serif;font-size: 0.9em;}
    body {margin:5px;}
    p {margin:30px 0px 30px 0px;}

    table.mt {border-width: 1px;border-spacing:0px ;border:1px solid #6EC0E6;;border-collapse: collapse;}
    table.mt th {text-align:center;
    height:60px; border:1px solid #3D85B4; background-color:#30AFEA;}
    table.mt td {border-left:1px solid #6EC0E6;text-align: center;
    height:45px;}
    table.mt tr{background-color:#E5F2F8; text-align:center; width:200px}
    table.mt tr:nth-child(even){background:#FFFFFF};

    Column 1
    Column 2
    Column 3
    Column 4
    Column 5
    Column 6
    Column 7
    Column 8
    Column 9
    Column 10

    Cell 1
    Cell 2
    Cell 3
    Cell 4
    Cell 5
    Cell 6
    Cell 7
    Cell 8
    Cell 9
    Cell 10

    Cell 1
    Cell 2
    Cell 3
    Cell 4
    Cell 5
    Cell 6
    Cell 7
    Cell 8
    Cell 9
    Cell 10

    Cell 1
    Cell 2
    Cell 3
    Cell 4
    Cell 5
    Cell 6
    Cell 7
    Cell 8
    Cell 9
    Cell 10

    Cell 1
    Cell 2
    Cell 3
    Cell 4
    Cell 5
    Cell 6
    Cell 7
    Cell 8
    Cell 9
    Cell 10

    Cell 1
    Cell 2
    Cell 3
    Cell 4
    Cell 5
    Cell 6
    Cell 7
    Cell 8
    Cell 9
    Cell 10

    Cell 1
    Cell 2
    Cell 3
    Cell 4
    Cell 5
    Cell 6
    Cell 7
    Cell 8
    Cell 9
    Cell 10

    Cell 1
    Cell 2
    Cell 3
    Cell 4
    Cell 5
    Cell 6
    Cell 7
    Cell 8
    Cell 9
    Cell 10

    Cell 1
    Cell 2
    Cell 3
    Cell 4
    Cell 5
    Cell 6
    Cell 7
    Cell 8
    Cell 9
    Cell 10

    Cell 1
    Cell 2
    Cell 3
    Cell 4
    Cell 5
    Cell 6
    Cell 7
    Cell 8
    Cell 9
    Cell 10

    Cell 1
    Cell 2
    Cell 3
    Cell 4
    Cell 5
    Cell 6
    Cell 7
    Cell 8
    Cell 9
    Cell 10

    fxheaderInit(‘dataTable2’,200,0,1);
    fxheader();

    Comment by raj | February 23, 2014 | Reply

  74. Hi,

    I’m declaring the table like this:

    However, on the following line in the fxheader() function:
    var r = tbDiv.rows[j].cloneNode(true);

    I’m getting the following error:
    Unable to get property ‘cloneNode’ of undefined or null reference

    Thanks,

    Mark

    Comment by Mark Rae | May 9, 2014 | Reply

  75. Hi, is it possible to easily toggle between scrollable view and normal view. I would like to be able to view a large table without scrolling if I want to. Default is should me shown with scrollbars.

    Thanks,

    Sander

    Comment by sanderb24ander | May 13, 2014 | Reply

  76. Dear Jaimon,

    Your fxHeader works beautifully. But I am new to Javascript Objects and have a following problem:

    Instead of the block: …………… ,
    I created a string var TABL with this content.
    How to pass this variable to fxHeader?
    Your script is:
    this.fxheaderInit = function(_tid,_sheight,_noOfRows,_noOfCols) {
    var tb = new Object();
    var td=ge$(_tid);
    tb.tid=_tid;
    tb.sheight=_sheight;
    tb.swidth=td.width;

    So, how can I change your script from var td=ge$(_tid), to read my string var TABL?

    Thanks

    Krzysztof E Wojciechowicz

    Comment by Krzysztof Wojciechowicz | May 24, 2014 | Reply

  77. Sorry, the line — Instead of the block —- was lost in my comment…….

    Your fxHeader works beautifully. But I am new to Javascript Objects and have a following problem:

    Instead of the block: …………… ,
    I created a string var TABL with this content.
    How to pass this variable to fxHeader?
    Your script is:
    this.fxheaderInit = function(_tid,_sheight,_noOfRows,_noOfCols) {
    var tb = new Object();
    var td=ge$(_tid);
    tb.tid=_tid;
    tb.sheight=_sheight;
    tb.swidth=td.width;

    So, how can I change your script from var td=ge$(_tid), to read my string var TABL?

    Thanks

    Krzysztof E Wojciechowicz
    my email: krzysztofw@mweb.co.za

    Comment by Krzysztof Wojciechowicz | May 24, 2014 | Reply

  78. I don’t know what happens. My sentence referring to – Instead of the block – was stripped of words: Table id=….. close Table.
    Krzysztof

    Comment by Krzysztof Wojciechowicz | May 24, 2014 | Reply

  79. hi jaimon
    i want to create a table with fixed header and fixed footer the rows are getting added dynamically ,i have done several search for this but i did not got any proper output as required the columns width shoud match or align with header and footer width.

    can you please help me for the same as i am using bootstrap3.

    Comment by sonal | May 29, 2014 | Reply

  80. I still can’t get this to work correctly in any browser, though your own examples work correctly for me!

    You can see what I mean here: http://quizleagueoflondon.co.uk/results/2014/TestScrollTable.htm

    Comment by Mark Rae | May 30, 2014 | Reply

  81. Thanks very much for the script!! fantastic! I’ve searched the whole web to find that one.
    I just have one question, Can I define a minimum width for my table. If it gets smaller than that number (px) it show the scrollbar?

    Thanks!!

    Comment by Fabio | January 30, 2015 | Reply

  82. I just wanted to let you know that I have written code that is based on this blog entry. This has been a great addition to my toolkit, and a wonderful educational piece in jquery.

    Thank you.

    Comment by Edward Gioja | June 8, 2015 | Reply

  83. To adjust the width of the columns to restrict the page needed to replace a field.
    this.fxheaderInit = function(_tid,_sheight,_swidth,_noOfRows,_noOfCols) {
    tb.swidth=_swidth;
    // tb.swidth=td.width;

    set on jsp files
    onload=”fxheaderInit(‘dataTable’, 500, 1300, 1,0);fxheader();”

    Thank you
    Riccardo

    Comment by ricca6412@tiscali.it | February 4, 2016 | Reply

  84. Dear Jaimon,

    first of all great work. First solution I really like and is easy to use. Great work!
    I have a tiny question. Is it possible to scroll the table to some position on load of the page?
    It would help me greatly.

    Comment by Felix Albrecht | April 19, 2016 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: