新潟市・西東京のホームページ制作なら クフー

新潟市・西東京のホームページ制作なら
クフー

  •  > 
  •  > 
  •  > 
  • レスポンシブWEBデザインでテーブルの特定列を固定する方法

レスポンシブWEBデザインでテーブルの特定列を固定する方法

      2015/12/02

large_html-css-logo
レスポンシブWEBデザインを考えるとき、頭を悩ませるのがテーブルの扱いですよね。できれば行列のレイアウトは崩したくない!という方のために、今回はエクセルの列固定機能のようにテーブルの特定列を固定する方法を紹介します。

デモページ

ソース

解説

flex_table_figure
大きく分けて、「外枠部分(.specific_table)」「固定部分(.lock_box)」「横スクロール部分(.flex_box)」の3つを作るイメージです。

外枠部分はdivで大枠のボーダー線や幅を指定します。テーブルには親の幅を超える値を指定しましょう。超えた部分がスクロールによって表示されます。

thやtdに記述したデータが幅を超えてもいいように、「overflow: hidden;」を、記述したデータの折り返しによる固定部分とスクロール部分のズレが生じないように「white-space: nowrap;」を指定するのがポイントです。

 - HTML/CSS