Geek Answers Handbook

Html table with fixed header column and row without JS

I'm currently trying to correctly display some kind of agenda that represents the clock in the main row and the different rooms in the head column.

I want to have fixed headers (first row and first column) and a scrollable table showing whether the room is currently available.

After some research, I saw that this question has already been answered using jQuery ou for JS home scripts. I would like to avoid this using <div> containers.

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

  • Left containing header column
  • Right one containing the title bar and table

This will allow me to scroll horizontally without moving the title column and scroll vertically without moving the title bar (at some absolute positions inside my parents, I think?).

My main problem is that I cannot figure out how to display these two main elements next to each other. Indeed, if I use the CSS float property, I cannot have scrollable overflow.

So here I am, taking a bit of your time to help me position these two elements without falling into the scroll.

Here you will find the html part of the code: Room Fooname Barname Barfoo Zorzore 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 write 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

+6
source share
2 answers

The easiest way is to add this css:

 table { float: left; }

And it will work the way you want.

Example

+5
source

Try Fiddle

CSS :

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

More articles:


All Articles