Question

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

我希望有固定的标题（第一行和第一列）和一个可滚动的表格，显示某个房间在给定时间是否可用。

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

我的策略是拥有一个有两个孩子的全球容器：

左侧包含标题列
包含标题行和表

这样我就可以在没有标题栏移动的情况下滚动横向，并且可以在没有标题行移动的情况下滚动（通过我父猜想的某些absolute定位？）。

我的主要问题是我无法想象如何将这两个主要元素显示在一起。实际上，如果我使用CSS属性float，我就不能有可滚动的溢出。

所以我在这里，需要一点时间来帮助我定位这两个元素而不会弄乱滚动。

在这里你会找到代码的html部分：房间 Fooname Barname Barfoo 佐尔佐尔 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

Answer 1

最简单的方法是添加此css：

table {
    float: left;
}

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

Example

Answer 2

试试这个Fiddle

CSS ：

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

}

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

2 个答案: