Html table with fixed header column and row without JS

Question

I am currently trying to display correctly a sort of agenda which represents hours on the head row and different rooms on the head column.

I want to have fixed headers (first row and first column) and a scrollable table displaying whether a room is available at a given time.

After a few researches I saw this question was already answered using jQuery ou homemade JS scripts. I would like to avoid this by using <div>containers.

My strategy is to have a global container with two children:

A left one containing the header column
A right one containing the header row and the table

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 ?).

My main problem is I can't figure how to display these two main elements next to each other. Indeed, if I use the CSS property float I can't have a scrollable overflow.

So here I am, requiring a little of your time to help me positioning these two elements without messing with the scrolling.

Here you will find the html part of the code: Room Fooname Barname Barfoo Zorzor Lorname Ipsname

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

CSS :

.table-container {
    position: relative;
    width: 600px;
    height: 100%;
    border: 2px solid red;
    display: inline-block;
}

th {
    border: 1px solid black;
    padding: 10px;
}

td {
    border: 1px solid black;
    padding: 10px;
    margin: 0;
    white-space: nowrap;
}

.right {
    overflow: auto;
}

As I am writing this, the preview does not display the first elements of my code as... code but interprets it as html. So here you will find the full code + rendering: DEMO

score 6 · Accepted Answer · edited Feb 12 '16 at 11:41

6

The simplest way is to add this css:

table {
    float: left;
}

And it will work like you want.

Example

edited Feb 12 '16 at 11:41

John Slegers

45,213
22
199
169

answered Dec 24 '13 at 11:37

Morpheus

8,829
13
51
77

Perfect ! I managed to display them this way by using the `float` parameter on both `headcol` and `right` containers, which didn't allow me to use the `overflow` parameter the way I wanted. Thank you ! – Thibault Martin Dec 24 '13 at 11:54
Hello from 2020 thank you for this super simple fix. – drewkiimon Feb 10 '20 at 20:45

score 0 · Answer 2 · answered Dec 24 '13 at 11:43

0

Try this Fiddle

CSS :

.right {
    overflow: auto;
    position: absolute;
    top: 0px;
    left: 134px;
    width: 73%;

}

answered Dec 24 '13 at 11:43

Manoj

1,860
1
13
25

It is close to the result I want ! The only thing that bugs me is the fixed "margin" of 134px. As there are only dummy values in the header column, the real ones might make it larger. Is there a way to make it not hardcoded ? I am especially thinking of the mobile devices displaying this table, with a low resolution. – Thibault Martin Dec 24 '13 at 11:51

Html table with fixed header column and row without JS

2 Answers2

Linked