1,630 views
この記事は最終更新から 3020日 が経過しています。
やりたいこと
大画面で横方向に伸びているテーブルを、
小画面のときには縦方向に表示したい。
これを
こうしたい。
今まではやり方がわからなくて、環境変数 $_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除外簡易実装済2025-12-09: 0回 2025-12-08: 0回 2025-12-07: 2回 2025-12-06: 3回 2025-12-05: 0回 2025-12-04: 0回 2025-12-03: 1回