PC既存サイトをレスポンシブ対応にする時によくあるのが、
テーブルが使われているページに遭遇して、
さて、これをスマートフォンで見やすくするにはどうしようかなと
今までの私はなんと、そのtableの下に「dl dt ddタグ」で組みなおしたものを書きなおして
パソコンとスマートフォンで、表示・非表示で見せていた。
が・・・！これが面倒で面倒で（当たり前だね）
ふと疑問に思って、簡単にテーブル解除して、縦一列の表になってくれないかな？と考えた。
Google検索窓に「レスポンシブでテーブル横ならび解除」と調べたら
出てくるじゃないかー！！！
（今までの私は一体何をしていたんだ）
その中で一番、私的に簡単だったものを紹介。
displayプロパティの値を変更する
引用元：https://design-spice.com/2012/11/01/responsive-table/
tableやtr、tdなどのテーブル関連のタグのdisplayプロパティを変更することでデザインを変更します。
tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。
@media only screen and (max-width:420px){
tbody tr{
display: block;
margin-bottom: 1.5em;
}
tbody th,
tbody td{
display: list-item;
border: none;
}
.....
}
私の場合はスマートフォン用のcss部分の「td」に、
display: list-item;
border: none;
を追加しただけ！
簡単に横ならび解除されて、
縦一列の表ができた。
なななななな・・・知らないで、
疑問に思わないでいるって、怖いと改めて思った、
修行が足りないコーダーの愉以なのでした。
修行なり。
