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>
<script type=”text/javascript”>
fxheaderInit(‘dataTable1’,200,2,2);
fxheaderInit(‘dataTable2’,200,2,0);
fxheader();
</script>
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
148 Comments »
Leave a reply to Jaimon Mathew Cancel reply
-
Recent
- Check digit calculator for barcodes and credit cards
- An Excel Addin to work with Unicode CSV files
- SimpleImageInfo – A Java class to get image size without loading the whole data
- Making Scrollable Tables with fixed headers – Updated
- Migrating 10g JSF Web project with ADF Faces components in jspx pages to 11g Facelets pages using Rich components
- Monitoring Log4J messages on a browser via server push
- Managing Vimeo video player via Javascript using Moogaloop API
- Making Scrollable Tables with fixed headers
- C# FTP Client Library
-
Links
-
Archives
- April 2013 (1)
- August 2011 (1)
- January 2011 (1)
- March 2010 (1)
- February 2010 (4)
- September 2009 (1)
-
Categories
-
RSS
Entries RSS
Comments RSS
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 |
Dear Jaimon,
In FF2 fixed column does not scroll vertically.
Comment by Manohar | March 22, 2010 |
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 |
Dear Jaimon,
Thanks, Now it is working in IE6.
In FF2 fixed columns are not scrolling.
Comment by Manohar | March 23, 2010 |
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 |
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 |
Hi Heather,
For the form items to work, you would need to change IDs of individual items after the table is cloned, as I’ve explained on the ADF Faces section on my previous post at https://jaimonmathew.wordpress.com/2010/02/02/scroller/
HTH
Jaimon
Comment by Jaimon Mathew | March 23, 2010 |
Dear Jaimon,
By using this script can we also fix the footer of the table?
Thanks.
Comment by Manohar | March 23, 2010 |
Not yet!!
Jaimon
Comment by Jaimon Mathew | March 23, 2010 |
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 |
Its been fixed now
Jaimon
Comment by Jaimon Mathew | March 25, 2010 |
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 |
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 |
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 |
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 |
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 |
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 |
Thanks for that I must of missed that part
Comment by Dotnetshadow | April 23, 2010 |
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 |
Thanks for the update.
Comment by DR_CHAOS | May 5, 2010 |
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 |
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 |
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 |
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 |
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
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 |
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 |
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 |
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 |
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 |
Hi Gopal,
It is mail at jaimon.co.uk
Jaimon
Comment by Jaimon Mathew | June 1, 2010 |
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 |
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 |
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 |
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 |
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 |
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 |
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
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 |
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 |
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 |
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 |
The new script works just fine.
Thank you.
Comment by Ellary | June 4, 2010 |
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 |
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 |
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 |
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 |
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 |
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 |
It works, your fix work great for both ie and ff.
Thank you.
Comment by Henry Le | June 11, 2010 |
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 |
Hi Bob,
Send me a minimal HTML file to reproduce the problem..
Jaimon
Comment by Jaimon Mathew | June 11, 2010 |
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 |
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 |
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 |
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 |
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();
tothis.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 |
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 |
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 |
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 |
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 |
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
 
//
fxheaderInit(“TimeGridView”,315,1,1);
fxheader();
Thanks,
David
Comment by David | July 5, 2010 |
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 |
Hi David,
Send the HTML to my email id – mail at jaimon.co.uk
Jaimon
Comment by Jaimon Mathew | July 5, 2010 |
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 |
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 |
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 |
Works with these changes… thanks!
Comment by Alex S. | July 29, 2010 |
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 |
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 |
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 |
Hi Terry,
Please see the source for the demo I’ve provided (http://blog.jaimon.co.uk/datascroller/fxHeader_0.3.html) for a working example.
HTH
Jaimon
Comment by Jaimon Mathew | September 2, 2010 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
Hi Dan,
Please try the new version (v0.6)
HTH
Jaimon
Comment by Jaimon Mathew | November 17, 2010 |
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 |
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 |
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 |
Hi Jaimon,
Great jaimon.. Its working now.. Thanks
Thanks
Udhay
Comment by Udhay | November 9, 2010 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
Thank you very much!I have found the mistake!
Comment by Sofia | March 9, 2011 |
Thank you so much for this fantastic solution!!!
Comment by kot | March 31, 2011 |
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 |
Hi Tony,
Are you using the correct DOCTYPE?
Jaimon
Comment by Jaimon Mathew | June 27, 2011 |
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 |
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 |
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 |
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 |
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 |
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 |
I have screenshots to illustrate this IE9 issue better, but not show how to upload them…
Comment by CN | July 29, 2011 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
[…] <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 |
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 |
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 |
Hi,
You could change the script to calculate the height rather than using a hard coded value.
On my first post auto height setting is used on the ADF example.
Check adjustHeight method in fxheader.js (from http://jaimonblog.appspot.com/datascroller/ADF10gScroller.zip)
HTH
Jaimon
Comment by Jaimon Mathew | September 18, 2012 |
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 |
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 |
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 |
Send me a small sample to recreate the issue, and I’ll take a look.
Comment by Jaimon Mathew | September 20, 2012 |
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
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 |
(hopefully the world doesn’t end today because I just got it working perfectly….)
Comment by Bob | December 21, 2012 |
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 |
Hi,
Can you please add code for freezing the footer of the table
Comment by Subh Dey | January 31, 2014 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
It should be working now
Comment by Jaimon Mathew | July 13, 2015 |
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 |
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 |