PC既存サイトをレスポンシブ対応にする時によくあるのが、
テーブルが使われているページに遭遇して、
さて、これをスマートフォンで見やすくするにはどうしようかなと
今までの私はなんと、そのtableの下に「dl dt ddタグ」で組みなおしたものを書きなおして
パソコンとスマートフォンで、表示・非表示で見せていた。

が・・・!これが面倒で面倒で(当たり前だね)

ふと疑問に思って、簡単にテーブル解除して、縦一列の表になってくれないかな?と考えた。

Google検索窓に「レスポンシブでテーブル横ならび解除」と調べたら
出てくるじゃないかー!!!
(今までの私は一体何をしていたんだ)

その中で一番、私的に簡単だったものを紹介。

displayプロパティの値を変更する
引用元:http://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;

を追加しただけ!

簡単に横ならび解除されて、
縦一列の表ができた。

なななななな・・・知らないで、
疑問に思わないでいるって、怖いと改めて思った、
修行が足りないコーダーの愉以なのでした。

修行なり。