Ich möchte eine HTML-Tabelle auf eine einzigartige Art und Weise scrollen lassen

Question

Ich möchte eine HTML-Tabelle implementieren. Dies ist der Screenshot.

Die erste Zeile Kategorien ist statisch. In der zweiten Zeile ist die erste Spalte statisch (Datum und Bilder), aber die zweite Spalte von Zeiten und Kanälen sollte scrollbare sein.

Es wird 24 Spalten geben, Zeiten mit einer halben Stunde Intervall. Und nur dieser Teil sollte scrollbar sein. Irgendwelche Ideen, wie ich das erreichen kann?

Dies ist mein aktueller Code, aber es ist nicht annähernd in der Nähe, was ich will.

<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

Sie können ein Plugin dataTable verwenden, das Funktionen wie FixedColumn und FixedHeader bietet, mit denen Sie Ihren beabsichtigten Zweck lösen können.

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

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

Answer 2

Verwenden Sie eine Spalte für Ihren Content Part (colspan/rowspan) und Nest eines scrollbaren div mit der zweiten Tabelle mit den 24 Spalten darin.

Answer 3

Ich habe vor kurzem hatte genau dieses Interface zu codieren. Es gibt nichts da draußen, was das tut, wonach Sie suchen, im Wesentlichen drei verschachtelte Tabellen, die alle in festen Richtungen scrollbar sind. Vertrau mir ... Ich habe nachgesehen.

Ich habe Hand eine Lösung codiert, die here gefunden werden kann. Es ist eine Technologievorschau, die ich vorbereitet habe, um diese Funktion zu demonstrieren. Klicken Sie oben links auf den Burger-Button und wählen Sie "Gästezimmer" aus dem Menü. Der Scrolltisch ist auf der rechten Seite. Verwenden Sie die Pfeiltasten links/rechts, um horizontal zu scrollen. Ich musste dies tun, da die oberste Zeile Daten enthält, also unendlich scrollbar ist.

Wenn Sie dies überprüfen sollten Sie in der Lage sein, eine Vorstellung von den Problemen beteiligt zu bekommen ... Es ist kein triviales Stück Code, weshalb ich es nicht hier gepostet habe.