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.

But if you did that the table would make no sense, the room could not show if booked or not if the data is movable - unless I'm missing something — StudioTime, Nov 01 '15 at 14:55
I mean, if the the data moves vertical, the the first column will move repectively, If the data moves horizontally- the first row will move with it. — Pratik Bhoir, Nov 01 '15 at 14:59
Ah ok, the only thing I could recommend is to look at datatables.net - not sure if it can do that but it can do a lot with tables in general — StudioTime, Nov 01 '15 at 15:09
Possible duplicate of [HTML table with fixed headers?](http://stackoverflow.com/questions/673153/html-table-with-fixed-headers) — Asons, Nov 01 '15 at 15:10
@LGSon no it is not, he wants it combined with a fixed first column. — Niki van Stein, Nov 01 '15 at 15:15
What you could do is fake the headers, top and left by copying what there and laying it over the top - just the header and first column i mean - then on horizontal scroll, hide the fake header, vertical scroll, hide the fake left column - ha ha, actually like the answer which has just been posted — StudioTime, Nov 01 '15 at 15:15
@BasvanStein If you check 2:nd answer, you will find the solution for that, therefore it is a duplicate (as i see it) ... and there are many good answers for many different ways to scroll/fixed columns/headers — Asons, Nov 01 '15 at 15:21
@LGSon If you have any.. Please help me with that... Cuz, I have searched a lot... and have not got which is a proper. — Pratik Bhoir, Nov 01 '15 at 15:24
@PratikBhoir Just follow the "duplicate link", there are 21 answers and I'm pretty sure one fits your needs. — Asons, Nov 01 '15 at 15:26

score 5 · Accepted Answer · answered Nov 03 '15 at 14:38

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.

Niki van Stein · Answer 2 · 2015-11-01T15:27:11.517

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

exatly, what i'm thinking of. But, it will require a little of finishing.. Try if its possible for you. — Pratik Bhoir, Nov 01 '15 at 15:20
Ok, figured it out, only the length of the header cells you still need to set correctly, but that is quite easy javascript and not part of the question ;) — Niki van Stein, Nov 01 '15 at 15:27

Html table with fixed header and fixed column both

2 Answers2