Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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

share|improve this question

2 Answers 2

up vote 1 down vote accepted

The simplest way is to add this css:

table
{
    float: left;
}

And it will work like you want.

Example

share|improve this answer
    
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
    
You are welcome :) –  Morpheus Dec 24 '13 at 11:54

Try this Fiddle

CSS :

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

}
share|improve this answer
    
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
    
Try to make all unit in % .we can achieve your requirement –  Manoj Dec 24 '13 at 12:09

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.