Hi, Stu. These are great. Any way to modify them so that the table height is variable based on the size of the viewport?
So much better than next/previous page linking (in many cases).
But... (of course, but I am willing to do the work to make it happen)...
Leave this page, fine. But could you buid two additional pages linked from here one for each of the two methods so that your audience could more easily isolate the differences of the two methods. When it's all in one CSS it's hard to know where one begins and the other ends.
Also, please strip away all the other groovey design stuff so that it is clear which CSS code is required for the techique and what are 'extranaeous' design definitions.
Further, it would be great to comment your CSS code liberally so that some of the other questions above are answered intrinsically.
Easy for me to say, but I want you to know that I would be willing to put in the work to make this happen, but I want to offer it to you to put out here to enchance what has already been so helpful to me and to gather your expertise while I do it.
I have a question that is along the line of what you did with the scrolling table.
I have a hidden floating table that house the headings and beneath it I have the main table.
If you click on the "plus" sign, it will unhide the floating table. Now if you scroll down you will see the floating table in action.
My question is, I want to align the blue line of the floating table with the table below. Any suggestion??
You can view the sample here:
Sorry I do not mean to hijack this thread but my question is another solution to the above scrolling tables.
I was wondering if you can perhaps shed some light into it.
Also the scrolling table limit is that its width are absolute and not relative so if the width below expands, than the heading alignment will be off.
Chi, I have had a quick look at the code and a couple of things may be causing the misalignment.
1. The column width for the floating heading are not the same as for the fixed table.
2. The <FORM> tag in the <TD>...</TD> should not be there. This should be placed before the <TABLE> tag as it is closed </FORM> after the </TABLE>. replace the <FORM> with to line up with the floating header.
Cool! Great respect Stu!
I am using a Mac with OS 10.3.9. I think I read somewhere that you might be interested in how this page worked with Mac browsers. I found your page when I had a need for a scrolling table with about 500 entries. Your demo seems to work as designed in Firefox, Safari and Camino. In iCab the top table has no col headers but all else seems OK. In IE 5.2 Mac the top table scrolls the column headers along with the page. For my purposes I believe I should use method 2 for max compatibility. Many thanks for your fine efforts to educate old fogies such as reside here. If you would like more details I will be happy to respond.
As others have commented, these work great. Thanks for making them available.
However, there seems to be absolutely no information anywhere that illustrates how to accomplish similar results in 2-D. That is, scroll vertically with fixed header (as you've done) AND scroll horizontally (with optionally fixed left column(s)). Is it even possible with standard HTML/CSS?
How can I do to display the content in a table's cell that overflow the cell's width in two or more line of the same cell. I'm using dinamic data to populate the table, so the lenght is variable.
PD. Thanks a lot for the demo "backgroung change". I'm trying to do that recently with any result.
I am new to this but I am looking for a scrolling table as mentionend. But where do I find the code to do so??
Thanks to Alex for this script.
Please enter your comments for this site page.
Please note that all posts are moderated.
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'
If your donation is for the use of a demo then please email me with the demo url after making your donation.