Blog

Excelで見かけるはじめの列を固定させたTableをjQueryで実現してみる

2016.02.02Cat:jQuery デザイナー

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の取得に若干癖があり、苦労しましたが、
なんとかできました。

 

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ