Html表具有固定的标题列和没有JS的行 [英] Html table with fixed header column and row without JS

问题描述

我目前正在尝试正确显示一种表示头列上小时的议程，以及头栏上的不同房间。

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.

经过几个研究，我看到这个问题已经使用jQuery ou自制JS脚本。我想避免使用< div> 容器。

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:

• 左一个包含标题栏


• 行和表格

这将允许我在不移动标题栏的情况下进行水平滚动，移动（通过一些绝对定位在其父母我想）。

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

我的主要问题是我不能图如何显示这两个主要元素彼此相邻。事实上，如果我使用CSS属性 float 我不能有一个可滚动溢出。

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.

这里你会发现代码的html部分：




房间


Fooname
Barname
Barfoo
Zorzor
Lorname Ipsname

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

在我写这篇文章时，预览不会显示我的第一个元素代码为...代码，但将其解释为html。在这里，您会看到完整的代码+渲染： DEMO

推荐答案

最简单的方法是添加这个css：

The simplest way is to add this css:

table {
    float: left;
}

它会像你想要的一样工作。

And it will work like you want.

示例

这篇关于Html表具有固定的标题列和没有JS的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！