表をデザインする際にtable要素を使ってレイアウトをすることがありますが、レスポンシブWebデザインでWebサイトを構築している場合、PCなどの大きな画面では見やすく表示されますが、スマホなどの小さな画面では見ずらくなってしまうことがあります。そのような小さい画面で閲覧した場合でも、なるべく見やすくなるようなレイアウトに変更する方法を紹介します。表のデザインでよくあるレイアウトパターンとして、左側に見出し、右側に説明文といった2列のtableレイアウトがあります。このような場合のtableをレスポンシブに対応させる方法の1つを見ていきます。}}最初の指定は通常に表示する場合の指定をしているだけです。メディアクエリーを使って小さい画面で表示した場合のレイアウトを指定しています。ここでは、640px以下の場合にレイアウトが変更されるようになっています。具体的にはまず、th要素とtd要素をブロック要素に変更して縦に並ぶようにします。none;」でボーダーの上側を消しています。このままでは、1番上のボーダーまで消えてしまうので、疑似クラスを使って最初のtr要素に出てくるth要素の上側だけにボーダーをつけるようにします。このようにすることで、大きい画面では2列、小さい画面では1列になって表示されるので、少しは見やすくすることができます。今度は、表示する内容が多く何列にもなってしまうようなtableレイアウトをレスポンシブ対応させる方法の1つです。}}通常表示のtable指定は先程と変わらないので省略して、小さい画面で表示する場合の指定だけ見ていきます。scroll;」を指定して、横スクロールを出して見せるようにしているだけです。nowrap;」で改行させないようにして見やすくしたりします。DEMO他にもいろいろ見せ方はあると思いますが、とりあえずこれらが、tableレイアウトをレスポンシブ対応させる方法の一例となります。