带有固定标题列的Html表和没有JS的行
发布时间:2020-12-14 18:40:06 所属栏目:资源 来源:网络整理
导读:我目前正在尝试正确显示一种议程,表示头排上的小时和头栏上的不同房间. 我希望有固定的标题(第一行和第一列)和一个可滚动的表格,显示某个房间在给定时间是否可用. 经过一些研究后,我看到这个问题已经使用jQuery自制的JS脚本来回答.我想通过使用 div容器来避
我目前正在尝试正确显示一种议程,表示头排上的小时和头栏上的不同房间.
我希望有固定的标题(第一行和第一列)和一个可滚动的表格,显示某个房间在给定时间是否可用. 经过一些研究后,我看到这个问题已经使用jQuery自制的JS脚本来回答.我想通过使用< div>容器来避免这种情况. 我的策略是拥有一个有两个孩子的全球容器: >左侧包含标题列 这将允许我在没有标题列移动的情况下滚动水平,并且在没有标题行移动的情况下滚动顶点(通过在其父节点内的一些绝对定位,我猜?). 我的主要问题是我无法想象如何将这两个主要元素显示在一起.实际上,如果我使用CSS属性float,我就不能有可滚动的溢出. 所以我在这里,需要一点时间来帮助我定位这两个元素而不会弄乱滚动. 在这里,您将找到代码的html部分: <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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |