は私が<strong>HTMLテーブル</strong>を実装するユニークな方法

Question

でHTMLテーブルscrollabeを作りたいです。これがスクリーンショットです。

最初の行カテゴリー静的です。 2行目の最初の列は静的（日付と画像）ですが、2番目の列はスクロール可能です。

24カラム、30分間隔で表示されます。その部分だけがスクロール可能でなければなりません。どのように私はそれを達成することができる任意のアイデア？

これは私の現在のコードですが、それは私が欲しいものに近い方法はありません。

<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

あなたの目的を解決することのできる使用FixedColumnとFixedHeaderのような機能を提供し、プラグインのdataTableを使用することができます。

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

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

Answer 2

いずれかを使用してコンテンツパート（COLSPAN/ROWSPAN）のためのコラムや巣その中に24列を有する第二のテーブルとスクロールのdiv。

Answer 3

私は最近、この正確なインターフェースをコーディングしなければなりませんでした。基本的に3つのネストされたテーブルがすべて独立して固定方向にスクロール可能です。私を信じて...私は見た。

hereが見つかりました。これは技術プレビューで、私はこの機能を実証する準備をしました。左上のバーガーボタンをクリックし、メニューから「客室」を選択します。スクロールテーブルは右にあります。水平方向にスクロールするには、左右の矢印キーを使用します。一番上の行が日付なので、これを行わなければならなかったので、無限にスクロール可能です。

あなたがこれを検査した場合は、問題点のアイデアを得ることができるはず...それは私がそれをここに掲載しませきた理由である、コードの些細なビットではありません。