【コピペでOK】CSSでレスポンシブなtableを作る簡単な方法！

一番一般的なテーブルデザインです。 テーブルの列数を1列にして1行ずつ表示させるデザインです。 テーブルの内部要素のをblock要素に指定して、width（横幅）を100％に指定することで簡単に縦積みのテーブルを作ることができます。 この方法ですと、セルが多いテーブルだと行数が増えるのでものすごく縦長のページになってしますこともありますので注意してください。 See the Pen by テラソリューション／テラソル (@terasolution) on CodePen. ※下部の0.5xや0.25xを押して比率を変えるとPC表示とスマホ表示を切り替えれます 見出し行があるデザインの場合は、スマホ表示時に見出し行をdisplay:none;で非表示にして、見出しになりうる列を見出しとして表示する方法があります。 こちらもtdにdisplay:block;とwidth:100%;を入れて1行