💻
[CSS] tableのthとtdをスマホ表示のときは縦に並べる
簡単なCSSのお話です。
やりたいこと
table
を、こういう感じでスマホ表示のときは th
と td
が縦に並ぶようにしたい。
やり方
前提
まず、マークアップは普通のテーブルだとしましょう。
<table>
<tbody>
<tr>
<th>項目1</th>
<td>データ1</td>
</tr>
<tr>
<th>項目2</th>
<td>データ2</td>
</tr>
<tr>
<th>項目3</th>
<td>データ3</td>
</tr>
</tbody>
</table>
table {
width: 100%;
border-collapse: collapse;
}
tr {
border-bottom: 1px solid #ccc;
}
th, td {
text-align: left;
}
このコードで、このようなテーブルができます。
解法
このテーブルに冒頭のデモのような挙動を持たせるには、以下のようなCSSを書けばよいです。
@media (max-width: 576px) {
th, td {
display: inline-block;
width: 100%;
float: left;
}
}
簡単すぎて、わざわざ記事にする必要あったのかというレベルですね😅
でも意外と思いつかないような気もするので、どこかの誰かのお役に立てば嬉しいです!
Discussion