テーブルを２列表示と全列表示に切り替え

ウィンドウの幅が狭いと、列数の多いテーブルが見づらいので、指定した列と見出し列の２列表示に切り替える。

デモページを表示

CSS

補足

• table 要素に付ける two-column クラスを定義。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• このサンプルでは、テーブル１行目の商品名をクリックすると２列表示と全列表示が切り替わる（１行目左端の「商品名」をクリックした場合は、全列表示になる）。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• クリックで２列表示と全列表示を切り替える table 要素に two-column クラスを付ける。