かんたんなレスポンシブルテーブル
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.
このぐらいの文字数なら変形しないほうが見やすいですが文字数が増えると便利。かも
Author And Source
この問題について(かんたんなレスポンシブルテーブル), 我々は、より多くの情報をここで見つけました https://qiita.com/spenic635/items/7fca2a57b708971eb91c著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .