我想以独特的方式制作HTML表格滚动

Question

我想实现 html表。这是屏幕截图。

第一行类别是静态。在第二行中，第一列是静态的（日期和图像），但第二列时间和通道应该是可滚动。

将有24列，时间间隔为半小时。只有那部分应该是可滚动的。有什么想法我能做到吗？

这是我目前的代码，但它无法接近我想要的内容。

<table width="100%" class="guide-table" BORDER=10 BORDERCOLOR="#EEEEEE" BORDERCOLORLIGHT="#EEEEEE" BORDERCOLORDARK="#EEEEEE">
<tr>
<td>Fri, 25 Sep</td>
<td>4:30 PM</td>
<td>5:00 PM</td>
<td>5:30 PM</td>
<td>6:00 PM</td>
<td>6:30 PM</td>
<td>4:30 PM</td>
<td>5:00 PM</td>
<td>5:30 PM</td>
<td>6:00 PM</td>
<td>6:30 PM</td>
<td>4:30 PM</td>
<td>5:00 PM</td>
<td>5:30 PM</td>
<td>6:00 PM</td>
<td>6:30 PM</td>
<td>4:30 PM</td>
<td>5:00 PM</td>
<td>5:30 PM</td>
<td>6:00 PM</td>
</tr>
<tr>
<td><img src="https://iprx.ten.com.au/ImageHandler.ashx?w=250&h=140&f=jpg&u=https%3A%2F%2Fnetworkten-a.akamaihd.net%2Fnew%2F2199827728001%2F201612%2F86%2F2199827728001_5239789882001_5239788195001-vs.jpg%3FpubId%3D2199827728001" height="35px" width="75px"></td>
<td>Ten News</td>
<td>Ten News</td>
<td>Ten News</td>
<td>Ten News</td>
<td>Ten News</td>
<td>Ten News</td>
<td>Ten News</td>
<td>Ten News</td>
<td>Ten News</td>
<td>Ten News</td>
<td>Ten News</td>
<td>Ten News</td>
<td>Ten News</td>
<td>Ten News</td>
<td>Ten News</td>
<td>Ten News</td>
<td>Ten News</td>
<td>Ten News</td>
<td>Ten News</td>
<td>Ten News</td>
<td>Ten News</td>
<td>Ten News</td>
<td>Ten News</td>
<td>Ten News</td>
</tr>
</table>

Answer 1

为您的内容Part（colspan / rowspan）使用一列，并将可滚动div与第二个表嵌套，其中包含24列。

Answer 2

您可以使用插件dataTable，它提供FixedColumn和FixedHeader等功能，使用它们可以解决您的预期目的。

https://datatables.net/extensions/fixedcolumns/examples/

https://datatables.net/extensions/fixedheader/

Answer 3

我最近不得不编码这个确切的界面。没有任何东西能够满足您的需求，基本上是三个嵌套的表，它们都可以在固定的方向上独立滚动。相信我......我看了。

我亲手编写了一个可以找到的解决方案here。这是我准备演示此功能的技术预览版。单击左上角的汉堡按钮，然后从菜单中选择“客房”。滚动表位于右侧。使用左/右箭头键水平滚动。我不得不这样做，因为顶行是日期，因此可以无限滚动。

如果您检查一下，您应该能够了解所涉及的问题...这不是一个简单的代码，这就是为什么我没有在这里发布它。