table要素をレスポンシブ対応させる方法

表をデザインする際にtable要素を使ってレイアウトをすることがありますが、レスポンシブWebデザインでWebサイトを構築している場合、PCなどの大きな画面では見やすく表示されますが、スマホなどの小さな画面では見ずらくなってしまうことがあります。そのような小さい画面で閲覧した場合でも、なるべく見やすくなるようなレイアウトに変更する方法を紹介します。

2列表示のレイアウトの場合

表のデザインでよくあるレイアウトパターンとして、左側に見出し、右側に説明文といった2列のtableレイアウトがあります。このような場合のtableをレスポンシブに対応させる方法の1つを見ていきます。

table {
  width: 100%;
  border-collapse: collapse;
}
th,td {
  padding: 12px;
  text-align: left;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
th {
  width: 20%;
  background: #eee;
}
@media only screen and (max-width:640px) {
  th,td {
    display: block;
    width: 100%;
    border-top: none;
  }
  tr:first-child th {
    border-top: 1px solid #ccc;
  }
}

最初の指定は通常に表示する場合の指定をしているだけです。そして、メディアクエリーを使って小さい画面で表示した場合のレイアウトを指定しています。ここでは、640px以下の場合にレイアウトが変更されるようになっています。
具体的にはまず、th要素とtd要素をブロック要素に変更して縦に並ぶようにします。ブロック要素に変更したことによって、ボーダーが重なってその分太くなってしまうので、「border-top: none;」でボーダーの上側を消しています。このままでは、1番上のボーダーまで消えてしまうので、疑似クラスを使って最初のtr要素に出てくるth要素の上側だけにボーダーをつけるようにします。
このようにすることで、大きい画面では2列、小さい画面では1列になって表示されるので、少しは見やすくすることができます。

表示列が多い場合

今度は、表示する内容が多く何列にもなってしまうようなtableレイアウトをレスポンシブ対応させる方法の1つです。

@media only screen and (max-width:768px) {
  table {
    display: block;
    width: 100%;
    overflow-x: scroll;
  }
  tbody {
    width: auto;
    white-space: nowrap;
  }
}

通常表示のtable指定は先程と変わらないので省略して、小さい画面で表示する場合の指定だけ見ていきます。内容としては、768px以下で表示させた場合には、table要素に「overflow-x: scroll;」を指定して、横スクロールを出して見せるようにしているだけです。tbody要素内は必要に応じて、「white-space: nowrap;」で改行させないようにして見やすくしたりします。