かんたんなレスポンシブルテーブル

col使ってますか

<table>タグの中にちゃんと<col>を入れていますか？
自分は<col>の存在を知るまで数年かかりました。
使ってみたら本当に便利だったのでまずは基本的な使い方から。

See the Pen JjdGvgg by sphenisc (@sphenisc) on CodePen.

本来CSSでthやtdの長さを指定していと中身のテキスト量に応じて自動でthやtdの横幅が変化するのですがcolにそれぞれ25% 25% 50%と指定しているためキレイに表示できています。
widthの数値を変更してもこの割合は維持されるので最近のレスポンシブ環境の適正が高そうです。

応用

See the Pen RwPrBWM by sphenisc (@sphenisc) on CodePen.

SP幅にすると変形するテーブル

See the Pen MWwKNEO by sphenisc (@sphenisc) on CodePen.

このぐらいの文字数なら変形しないほうが見やすいですが文字数が増えると便利。かも