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
– StudioTime, Commented Nov 1, 2015 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
– Pratik Bhoir, Commented Nov 1, 2015 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
– StudioTime, Commented Nov 1, 2015 at 15:09
@LGSon no it is not, he wants it combined with a fixed first column. — Niki van Stein
– Niki van Stein, Commented Nov 1, 2015 at 15:15

Pratik Bhoir · Accepted Answer · 2015-11-03 14:38:38Z

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 · Accepted Answer · 2015-11-01 15:27:11Z

0

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

edited Nov 1, 2015 at 15:27

answered Nov 1, 2015 at 15:14

Niki van Stein

10.8k3 gold badges33 silver badges63 bronze badges

2 Comments

Pratik Bhoir Over a year ago

exatly, what i'm thinking of. But, it will require a little of finishing.. Try if its possible for you.

Niki van Stein Over a year ago

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

Collectives™ on Stack Overflow

Html table with fixed header and fixed column both

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related