How can I alter the FixedTableHeader jQuery plugin to have a fixed first column as well?

问题

I'm using a jQuery plugin from here http://www.tablefixedheader.com/ to make a snazzy table with a fixed heading, sorting and other cool features. Now, I've also looked at jqGrid, which looks ridiculously awesome, but we are doing some funky things with our data source and I don't think it is quite ready to play well with jqGrid.

Anyways, my bosses want the first column of the table I created to be fixed, so they can scroll on the x-axis, but still see the first column. How can I modify this plugin to provide this functionality?

Any help is greatly appreciated

Thanks

EDIT:

I tried adding:

th:first-child
{
    position        : relative; 
}
td:first-child
{
    position        : relative; 
}

As well as "fixed", but it seems to be more complicated than this simple solution...

Doing this does have an effect, it just isn't that pleasing. Making this change causes it to stay static on the left side, but I can't really scroll down, and the th doesn't really seem to work.

EDIT 2:

I've begun implementing the solution given below, although I am not entirely confident in my ability to tinker with this plugin. Anyways, here's the current state of tinkering:

I'll continue updating as I go...

I get an error that says this.offset.top is null or not an object... blah,

This code goes in the document.ready thing:

         var currentTop = 0;
         var currentLeft = 0;
         var currentWidth = 0;
         var currentHeight = 0;
         var currentContent = "";
         var currentDiv = "";
         var currentID = "";
         $('td:first-child').each(function (index) {
             currentTop = $(this).offset.top;
             currentLeft = $(this).offset.left;
             currentWidth = $(this).width;
             currentHeight = $(this).height;
             currentContent = $(this).html();
             currentID = "fixed_column_cell" + index;
             currentDiv = "<div class=\"fixed_column_cells\" id=\"" + currentID + "\">" + currentContent + "</div>";
             $('body').append(currentDiv);
             $('#' + currentID).offset({ top: currentTop, left: currentLeft });
             $('#' + currentID).width(currentWidth);
             $('#' + currentID).width(currentHeight);
         });
         $('fixed_column_cells').css('position', 'fixed');

Currently stuck

回答1:

Interesting problem. I don't think you'll find that the table cell (TD) element is going to want to behave this way for you. The thing to do might be to loop over all the td:first-childs and copy their content into divs of the same size that overlap the TDs. those divs will let you position them correctly.

I think you're running into a limitation of something with inherent table-cell behavior.

Pseduocode:

For each table cell in the first column
get top left position
get width and height
create new div of same size at same position
copy content into new div
set div to fixed pos

回答2:

I know you said that you have already gotten the jquery library for the fixed header. There are however some libraries out there for fixed columns as well as headers. One that I have used is Fixed Table which allows you to set the left column as well as the headers to be fixed. Hope this will help you

来源：https://stackoverflow.com/questions/11193207/how-can-i-alter-the-fixedtableheader-jquery-plugin-to-have-a-fixed-first-column

标签

javascript

jquery

html

css

jquery-plugins