(18) テーブルの列を縦方向に並べる

user

9年前

1,751 views

この記事は最終更新から 3220日が経過しています。

やりたいこと

大画面で横方向に伸びているテーブルを、
小画面のときには縦方向に表示したい。

これを

こうしたい。

今まではやり方がわからなくて、環境変数 $_SERVERからブラウザ種別を取得して描画の仕方を分けていた。
これからはそんな面倒くさいとことをしなくてよくなりそうだ。

実現方法

CSSだけで実現可能だ。
画面幅が小さくなった時に th と td を display:block してやればよい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
table{
  width: 100%;
  border: 1px #000 solid;
  border-collapse: collapse;
}
th,td{
  border: 1px #000 solid;
}
th{
  background-color: #ffe;
}
@media (min-width: 768px) {
  th,td{
    width: 50%;
  }
}
@media (max-width: 767px) {
  th,td{
    width: 100%;
    display: block;
  }
}
</style>
</head>
<body>
<table>
  <tr>
    <th>タイトル</th>
    <td>データ</td>
  </tr>
  <tr>
    <th>タイトル</th>
    <td>データ</td>
  </tr>
  <tr>
    <th>タイトル</th>
    <td>データ</td>
  </tr>
</table>
</body>
</html>

以下、サンプルページです。
https://www.dogrow.net/hp/sample/00018/

アクセス数（直近7日）: ※試験運用中、BOT除外簡易実装済

2026-06-27: 0回

2026-06-26: 0回

2026-06-25: 1回

2026-06-24: 2回

2026-06-23: 0回

2026-06-22: 8回

2026-06-21: 6回