0

I'm building a personalized table, and I want to make the scroll with the fixed header possibile. I've created a div which will substitute the original header table and will be fixed.

I made a simple JS function:

function resizeCol(numerocolonne){

var leng= $("tbody tr").length;
for(i=1;i<=numerocolonne; i++){
    var bigger=$('[value="1-'+i+'"]').width();
    $('[value="0-'+i+'"]').width(bigger);
}

}

which calculate the width of the columns and set the width for the fake header. All works good, except that I don't know how to allineate properly the fake header columns and the real ones.

I don't know if I explained myself clearly, so here is a fiddle:

FIDDDLE

I can't make the #header div wider than the window.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
ciaoben
  • 107
  • 11
  • I think you left out some code. Where is the header you're talking about? And your `resizeCol` function isn't in your fiddle. – Samsquanch Jan 29 '14 at 16:40
  • Can you explain a little more clearly what you're trying to do with the header vs what it's actually doing? – Samsquanch Jan 29 '14 at 16:45
  • i want that the div#header reflect exactly the theader of the table. So, after having done that, i will sostitute the theader with div and make the header fixed while scrolling without problems. – ciaoben Jan 29 '14 at 16:53

1 Answers1

0

I've gotten you started with this:

resizeCol(14);


function resizeCol(numerocolonne){
    $('#datatable_pagament_invisibile thead').clone().appendTo('#header');
    var $headers = $('#datatable_pagament_invisibile th');
    $headers.each(function(index, el) {
        $('#header').width($('#datatable_pagament_invisibile').width());
        //$('#header thead th').height($('#datatable_pagament_invisibile thead').height());
        $('#header th').eq($headers.index(this)).width($(this).width());
    });
}

It takes a different approach than what you were doing (mainly because the way you were doing it was going to require similar work anyway) -- it clones the thead and puts it in another div which then mimics the width of the table and columns.

Fiddle here.

You may also be interested in another solution that I found posted in another similar question. I would go with this is if fits your situation/code. I think it's a much simpler and cleaner solution.

Community
  • 1
  • 1
Samsquanch
  • 8,866
  • 12
  • 50
  • 89
  • brilliant solution. Many thanks! i would like to ear your opinion about hiding the real thead to fix the cloned one. What would you do? – ciaoben Jan 30 '14 at 08:16
  • You can either hide it or just leave it alone. If you fix it in the right place no one will know the difference between it being hidden or not. – Samsquanch Jan 30 '14 at 13:10
  • i'm stucked in the final step... i can't make it work.. could you help me? I used an absolute positioning for cover the real one.. but i can't make it fixed.. – ciaoben Jan 30 '14 at 14:17
  • ty, but i've tried this way, but if you notice, when changing the width of the page, the columns lose their alignement... – ciaoben Jan 30 '14 at 15:51
  • 1
    Try this one: http://jsfiddle.net/aVT7W/280/ -- it calls `resizeCol` when the window is resized. EDIT: moved some code around too. – Samsquanch Jan 30 '14 at 15:56
  • you 're amazing! ty very much.. i was totally stucked. This solution is great and not too complicate. Brilliant. Now i 've just to work a little on the scrollLeft to make it work with bootstrap grid. Thanks again, i owe you a couple of beers ! – ciaoben Jan 30 '14 at 16:10