Html Freeze Columns - Seriously.

There are a ton of articles by developers, mostly javascript, attempting to create freeze panes for table columns in Html. I've done this in the past and I guess I've just gotten lucky due to the layout and design. I'm currently working on a project that has a specific table design that I need to use and I thought I could just give my <td> a class and control it with javascript or css. I've tried about every package and example I've ran across but they change my table too much to use and many still don't work even after I changed my table to test it. So, it's very aggravating. I know there are table and grid plugins for javascript frameworks but even with their skinning they are still unusable. Is there a simple way to lock the left most column in place on a basic Html table?

I'm trying to lock a column not a header row. There's articles on the web that get them confused so I thought I would mention it. I can lock header rows but I'm trying to freeze the left most column and allow the other cells to scroll behind it.

Even some pointers on how I can change my table would help, for instance, do I need to use a nested table for my static column or should I just scrap <table> altogether and just use all <div> or <span>? Actually, I've tried the nested table but had difficulty lining up the rows to match but is probably my closest solution. Anyway, thought I'd ask for help and wonder why HTML5 is not addressing this issue.

It would probably help if you explained what you mean by 'freeze columns/panes'. Also, what part should be frozen? Why aren't they frozen now?

Finally, is this for layout? Tables should only be used to display tabular data. Using tables for layout is the epitome of doing it wrong.

Oh ok.

Sorry, this is for tabular data.
Take this example table:




I can easily freeze the header row (Clothing, #Own, %Blue, %Red) by adding <thead> and <tbody> elements. I need to make to where the first column ("Shirts, Shorts etc") is frozen and the remaining columns can horizontally scroll behind the first column. Typically, my tables will have 20 or more columns that extend off the right side of the monitor. I would like to still know which line (shirts or shorts) I'm looking at after I scroll all the way over to the right.

Let me know if that makes more sense. I need more of a discussion and direction rather than someone fixing a bunch of code for me.

Would it be out of the question to have your records iterate via column, instead of row? Since you can get the effect you want on a header row. What I mean is, instead of reading the list of items from top to bottom, you would read it from left to right.

Nope, I can't do that. It's pretty specific how the tables have to be. I have some wiggle room, but not enough for even using some type of JS grid/table plugin. Seriously, HTML5 should be considering this. I can't believe it's so difficult to freeze the left column of a table.


Anyway, that kinda thinking is definitely out-of-the-box. Is there someway to rotate a table? Though, I guess the text orientation would be wrong but maybe that could be fixed also. Anyway, I'll continue messing with stuff.

What I do most of the time is instead of freezing the row/column I'll use jQuery to duplicate the area I want frozen and then hide it. When the user scrolls out of the area you simply use jQuery to show the copy leaving the original in the table.

You would need CSS to ensure the copied area mimics the "frozen" area if that makes sense.

This can of course be accomplished in plain ol' JavaScript but I'm a big fan of how much faster jQuery gets ya going.

The duplicate content method is what I've been running into a lot. I'm going to try to work something up.