带有固定标题列和行的 Html 表，没有 JS

Html table with fixed header column and row without JS

提问by Thibault Martin

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.

经过一些研究，我看到这个问题已经使用 jQuery 或自制的 JS 脚本得到了回答。我想通过使用<div>容器来避免这种情况。

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 absolutepositioning within its parents I guess ?).

这将允许我在不移动标题列的情况下水平滚动，并且在不移动标题行的情况下垂直滚动（absolute我猜是通过其父项中的某些定位？）。

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 floatI can't have a scrollable overflow.

我的主要问题是我不知道如何将这两个主要元素并排显示。事实上，如果我使用 CSS 属性，float我就不会出现可滚动溢出。

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

在这里你会找到代码的 html 部分： 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:

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

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

采纳答案by Morpheus

The simplest way is to add this css:

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

table {
    float: left;
}

And it will work like you want.

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

Example

例子

回答by Manoj

Try this Fiddle

试试这个小提琴

CSS:

CSS:

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

}