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

概述我目前正在尝试正确显示一种议程,表示头排上的小时和头栏上的不同房间. 我希望有固定的标题(第一行和第一列)和一个可滚动的表格,显示某个房间在给定时间是否可用. 经过一些研究后,我看到这个问题已经使用jQuery自制的JS脚本来回答.我想通过使用< div>容器来避免这种情况. 我的策略是拥有一个有两个孩子的全球容器： >左侧包含标题列 >一个包含标题行和表的右边的 这将允许我在没有标题列移动的情况 我目前正在尝试正确显示一种议程,表示头排上的小时和头栏上的不同房间.

我希望有固定的标题(第一行和第一列)和一个可滚动的表格,显示某个房间在给定时间是否可用.

经过一些研究后,我看到这个问题已经使用jquery自制的Js脚本来回答.我想通过使用< div>容器来避免这种情况.

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

>左侧包含标题列
>一个包含标题行和表的右边的

这将允许我在没有标题列移动的情况下滚动水平,并且在没有标题行移动的情况下滚动顶点(通过在其父节点内的一些绝对定位,我猜？).

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

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

在这里,您将找到代码的HTML部分：




房间


Fooname
barname
barfoo
佐尔佐尔
Lorname Ipsname

<div >        <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 >Already booked</td>                <td >Available for booking</td>                <td >Already booked</td>                <td >Already booked</td>                <td >Available for booking</td>                <td >Available for booking</td>            </tr>            <tr>                <td >Available for booking</td>                <td >Already booked</td>                <td >Already booked</td>                <td >Available for booking</td>                <td >Already booked</td>                <td >Available for booking</td>            </tr>            <tr>                <td >Already booked</td>                <td >Available for booking</td>                <td >Already booked</td>                <td >Already booked</td>                <td >Available for booking</td>                <td >Available for booking</td>            </tr>            <tr>                <td >Already booked</td>                <td >Available for booking</td>                <td >Available for booking</td>                <td >Available for booking</td>                <td >Already booked</td>                <td >Already booked</td>            </tr>            <tr>                <td >Already booked</td>                <td >Available for booking</td>                <td >Already booked</td>                <td >Already booked</td>                <td >Already booked</td>                <td >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

总结

以上是内存溢出为你收集整理的带有固定标题列的Html表和没有JS的行全部内容，希望文章能够帮你解决带有固定标题列的Html表和没有JS的行所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。