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

Answer 1

The simplest way is to add this css:

table {
    float: left;
}

And it will work like you want.

Example