1

I'm using the plugin Sticky Table Headers & Columns in a table. The plugin works perfectly. My question is how to let the second column fixed. I searched the documentation and tried to contact the author, but it still fails.

I also tried adding another <th>Sample #2</th>, but a white block appears at the top of the column when you scrolls, as you can see here.

I think I'm very close to the solution. Could anyone help me with this problem?

Solved: jsfiddle.net/tyanxbbs/8

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Brightweb
  • 233
  • 1
  • 8
  • 25

1 Answers1

2

In jquery.stickyheader.js edit the below line and try.

$stickyInsct.html('<thead><tr><th>'+$t.find('thead th:first-child').html()+'</th></tr></thead>');

to 

$stickyInsct.html('<thead><tr><th>'+$t.find('thead th:first-child').html()+'</th><th>'+$t.find('thead th:eq(1)').html()+'</th></tr></thead>');

update the below line too. I just changed from 0 to 1.

$stickyCol.append($col)
                .find('thead th:gt(1)').remove()
                .end()
                .find('tbody td').remove();
sai sudhakar
  • 204
  • 1
  • 2
  • 8
  • I updated the code with your suggestion. But the white space still there when you scroll. I think the problem is related to the text size, take a look http://jsfiddle.net/tyanxbbs/7/ – Brightweb Feb 04 '15 at 19:30
  • @Brightweb , I just edited my answer. Hope it helps. – sai sudhakar Feb 04 '15 at 19:32
  • Well done! It works like a charm, dude. The result is here: http://jsfiddle.net/tyanxbbs/8/. Very thanks! – Brightweb Feb 04 '15 at 19:35