Fixed Header and Fixed Column Html Table

Question

I need both fixed headers and fixed columns at the same time.

I want to have fixed headers (first row and first column) and a displayed scroll table at a specific point in time.

• Left containing header column
• Right, containing the title bar and table

IMP Point:

• When data moves horizontally: fixed header (first row will move accordingly)
• When data moves vertically: fixed column (first column will move accordingly)

This will allow me to scroll horizontally without moving the title column and scroll vertically without moving the title bar (by some assumptions within my parents, I think?).

PS . I searched a lot, but I could only find fixed headers or a fixed first column. I want both. Below is a script containing a fixed column. Please help me add a fixed header (first line) to it.

script: http://jsfiddle.net/cfr94p3w/

HTML code:

<div class="table-container"> <div class="headcol"> <table> <thead> <th>Room</th> </thead> <tbody> <tr> <td>Fooname</td> </tr> <tr> <td>Barname</td> </tr> <tr> <td>Barfoo</td> </tr> <tr> <td>Zorzor</td> </tr> <tr> <td>Lorname Ipsname</td> </tr> </tbody> </table> </div> <div class="right"> <table> <thead> <th>8-10</th> <th>10-12</th> <th>12-14</th> <th>14-16</th> <th>16-18</th> <th>18-20</th> </thead> <tbody> <tr> <td class="cell booked">Already booked</td> <td class="cell available">Available for booking</td> <td class="cell booked">Already booked</td> <td class="cell booked">Already booked</td> <td class="cell available">Available for booking</td> <td class="cell available">Available for booking</td> </tr> <tr> <td class="cell available">Available for booking</td> <td class="cell booked">Already booked</td> <td class="cell booked">Already booked</td> <td class="cell available">Available for booking</td> <td class="cell booked">Already booked</td> <td class="cell available">Available for booking</td> </tr> <tr> <td class="cell booked">Already booked</td> <td class="cell available">Available for booking</td> <td class="cell booked">Already booked</td> <td class="cell booked">Already booked</td> <td class="cell available">Available for booking</td> <td class="cell available">Available for booking</td> </tr> <tr> <td class="cell booked">Already booked</td> <td class="cell available">Available for booking</td> <td class="cell available">Available for booking</td> <td class="cell available">Available for booking</td> <td class="cell booked">Already booked</td> <td class="cell booked">Already booked</td> </tr> <tr> <td class="cell booked">Already booked</td> <td class="cell available">Available for booking</td> <td class="cell booked">Already booked</td> <td class="cell booked">Already booked</td> <td class="cell booked">Already booked</td> <td class="cell available">Available for booking</td> </tr> </tbody> </table> </div> </div> 

Thank you, I have a good day.

Answer 1

Finally I got a response, I used https://github.com/meetselva/fixed-table-rows-cols

Here is a working script http://jsfiddle.net/cfr94p3w/17/

It is easy to use. Just take a regular HTML table and apply the plugin
JS: https://rawgit.com/meetselva/fixed-table-rows-cols/master/js/fixed_table_rc.js
css: https://rawgit.com/meetselva/fixed-table-rows-cols/master/css/fixed_table_rc.css

 $(document).ready(function() { $('#fixedHeader').fxdHdrCol({ fixedCols: 2, width: "100%", height: 400, colModal: [ { width: 100, align: 'center' }, { width: 70, align: 'center' }, { width: 70, align: 'left' }, { width: 70, align: 'left' }, { width: 70, align: 'left' }, { width: 70, align: 'left' }, { width: 70, align: 'left' }, { width: 70, align: 'center' }, ], }); }); 

PS: Thanks to everyone, mainly "Bas van Stein" for their help.

Answer 2

I think I understand what you want. Correct me if I am wrong. Next jsFiddle: http://jsfiddle.net/cfr94p3w/14/

Will do what you want (a bit of styling is required in the extra head of the table).

Basically, you create a scroll binding to the document and an additional table heading that you show and hide at the right time.

html add

 <table id="header-fixed1"> <thead> <th>Room</th> </thead> </table> /*Later after class="right"*/ <table id="header-fixed2"> <thead> <th>8-10</th> <th>10-12</th> <th>12-14</th> <th>14-16</th> <th>16-18</th> <th>18-20</th> </thead> </table> 

javascript / jQuery

 var tableOffset = $("#tablepart1").offset().top; var $fixedHeader1 = $("#header-fixed1"); var $fixedHeader2 = $("#header-fixed2"); $(window).bind("scroll", function() { var offset = $(this).scrollTop(); if (offset >= tableOffset && $fixedHeader1.is(":hidden")) { $fixedHeader1.show(); $fixedHeader2.show(); } else if (offset < tableOffset) { $fixedHeader1.hide(); $fixedHeader2.hide(); } });