我目前正在尝试正确显示一种议程，该议程代表头行的时间和头列的不同房间。

我想要固定的标题(第一行和第一列)和一个可滚动的表格，显示房间在给定时间是否可用。

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

我的策略是拥有一个带有两个 child 的全局容器:

• 左边一个包含标题栏
• 右边一个包含标题行和表格

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

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

所以我在这里，需要您花一点时间来帮助我定位这两个元素而不影响滚动。

在这里您可以找到代码的 html 部分: 房间 名称 酒吧名称 吧台 佐佐尔 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:

table {
    float: left;
}

它会如您所愿地工作。

Example

关于没有 JS 的具有固定标题列和行的 Html 表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20759920/