【CSS】tableをレスポンシブで縦並びにする方法

「パソコンではtableを使って横並べにしたいけど、スマホでは横幅が足りないからいっそ縦並びにしてしまいたい！」

CSSでtableを分解して縦並びにする方法を解説します。レスポンシブ対応です。

table,tbody,tr,th,tdにdisplay:block

table構成要素にdisplay:blockを指定します。

↓下記の表はレスポンシブ対応させており、ブラウザ幅を狭くすると縦並びになります。

ヘッダー	セルセル
ヘッダー	セルセル

<style>
@media(max-width:800px){           
    table,tbody,tr,th,td{
        display: block;
    }
}
</style>
<table border="1">
    <tr>
        <td>左上</td><td>右上</td>
    </tr>
    <tr>
        <td>左下</td><td>右下</td>
    </tr>
</table>

display:blockはブロック要素に変えるCSSです。

tableやtdすらただのdivと化してしまいます。

【注意】tbodyを忘れずに！

table内には「tbody」があります。htmlソース内で指定しなくてもブラウザ側が補填して付与します。セレクタで指定し忘れないようにしましょう。

レスポンシブ対応としてメディアクエリを使ってCSSを切り替えています。「@media(max-width:800px)」のように記載します。