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> </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.