简体   繁体   中英

Table with multiple inner tables and Fixed Header Table with Horizontal Scroll

I have been working with a table which has 3 inner tables. and the third table being wider in width and has horizontal scroll.

I have been trying to fix the header for each table and trust me I tried all the solutions but none of the solution over the internet has the same thing as I do (or may be I couldn't find one)

I tried various plugins floathead and fixedheadertable but the horizontal thing breaks it.

I have my jsfiddle example up can anyone show me the way maybe

http://jsfiddle.net/warlockdn/qyrjvnvv/2/

I am open to restructure the table but not sure what way to take ?

This is the basic structure

<table>
    <thead>
        <tr>
            <td>&nbsp;</td>
            <td>Latest</td>
            <td>Oil Majors</td>
        </tr>
    </thead>
    <tbody>
        <td>
            <table></table>
        </td>
        <td>
            <table></table>
        </td>
        <td>
            <table></table>
        </td>
    </tbody>
</table>

Use jQuery with scroll event to make this. Try:

$(document).ready(function() {
    $.each($("thead"),function(){
        $(this).css({position:'relative'})
    })

    $(window).scroll(function(){
        $("thead").css({top:$(window).scrollTop()})
    })
})

Example: http://jsfiddle.net/uj313udL/

UPDATE I've modified a lot of your code. I've added width on all headers. It works fine with Firefox and Chrome. Please try:

Example: http://jsfiddle.net/nzdhs4wq/

So,

I got the table to work as I needed with the help from @Frank.

Used the code he gave. Since the table won't take position relative to row or column. I added a div inside each under and changed the jquery code to catch the class.

$.each($(".stick_top"),function(){
    $(this).css({position:'relative'})
})

$(window).scroll(function(){
    console.log($(window).scrollTop())
    $(".stick_top").css({top:$(window).scrollTop()})
})

http://jsfiddle.net/warlockdn/uj313udL/8/

It works fine now. Thank you Frank.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM