テーブルレイアウトを、スマートフォンにレスポンシブ対応させるCSS - ホームページ制作やリニューアル印刷物デザインなら大阪のWPC

スマホ対応が当たり前になってきたので、昔作ったサイトの会社概要とかフォームのテーブルデザインを、できるだけ簡単にレスポンシブ対応させたいものです。 CSSを追記するだけでイケる場合も多いので、コピペ用に書いておきます。 capture デモページ DEMO まず、一番オーソドックスな左見出しのテーブルの場合です。 HTML 左見出し一例 <table> <tr> <th>見出し1</th><td>値1</td> </tr> <tr> <th>見出し2</th><td>値2</td> </tr> <tr> <th>見出し3</th><td>値3</td> </tr> </table> このtableタグに「class="table-sp"」というクラスを付けます。 （全てのtableに効かせるなら上記は要りません。） <table class="table-sp"> こうですね。 で、下記の