Html table with fixed header and fixed column both

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 scrollable table displaying at a given time.

• A left one containing the header column
• A right one containing the header row and the 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 would allow me to scroll horizontaly without have the header column moving, and to scroll verticaly without having the header row moving (by some absolute positioning within its parents I guess ?).

PS : I have searched a lot, but what i could found is, only fixed headers or fixed first column. I want both at a time. Here is the fiddle which contains fixed column, Please help me in adding fixed header(first row) in it.

fiddle: 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 and have nice day.

Answer 1

I finally Got the answer, I used the https://github.com/meetselva/fixed-table-rows-cols

Here is the working fiddle http://jsfiddle.net/cfr94p3w/17/

It's simple to use. Just take normal 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 everybody, mostly 'Bas van Stein' for the assistance.

Answer 2

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

Will do what you want (it only needs a bit of styling in the additional table head.).

Basically you create a scroll binding to the document and an extra table header that you show and hide at the correct moment.

html to 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();
    }
});