我想以獨特的方式製作一個HTML表格scrollabe

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

您可以使用一個插件dataTable，它提供了像FixedColumn和FixedHeader這樣的功能，用它可以解決您的預期目的。

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

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

Answer 2

用途一個欄爲你的內容的一部分（合併單元格/行跨度）和巢滾動DIV與其中的24列第二個表。

Answer 3

最近我有編寫這個確切的接口。沒有什麼東西可以滿足你的要求，基本上三個嵌套表格都可以在固定的方向上獨立地滾動。相信我...我看了。

我已經手工編碼的解決方案，可以找到here。這是我準備展示此功能的技術預覽。點擊左上方的漢堡按鈕，然後從菜單中選擇「客房」。滾動表在右側。使用左/右箭頭鍵水平滾動。由於第一行是日期，所以我必須這樣做，所以無限滾動。

如果您檢查了這一點，您應該能夠了解所涉及的問題......這不是一小瑣碎的代碼，這就是爲什麼我沒有在這裏發佈它。