Excelやスプレッドシートのテーブルなどで、
列が多い場合にはじめの列を固定させて表示されているのを度々見かけますが、

このテーブルがレスポンシブで使えそうだと思いましたので、
jQueryを使って実現してみました。

↓作ってみたもののDEMO

DEMO

方法

以下の様な手順で実現しました。

1. テーブルをdiv要素で囲み、めいいっぱいに広げて、テーブルをwidth:autoで無理のない大きさに広げ、基準の大きさとして取得する
2. 広げていたdiv要素を元の大きさに戻して、overflow: autoを設定
3. さらにその要素をdiv要素で囲み、position:relativeを設定して、場所の基準とする。
4. テーブルのはじめの列それぞれについて、CSSの情報を取得する
5. テーブルのはじめの列がある位置にdisplay: table-cellおよびdisplay: tableに設定したdivでCSSをそのまま写した要素をdisplay: abosluteで配置する

以下が、その具体的なコードです。
FirefoxやIEでは、tableのCSSの取得に若干癖があり、苦労しましたが、
なんとかできました。