ホーム(記事一覧)へ

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

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

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

完成形(横から縦へ)

下記はtableでつくった表です。ブラウザ幅を変えて確認してみてください。縦並びに切り替わります。

左上右上
左下右下

具体的な方法は下記で解説します。

table構成要素にdisplay:block

上記【完成形】のコードです。table構成要素にdisplay:blockを指定しています。

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

display:blockは横並びにならないブロック要素に変えてしまうCSSです。

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

セレクタを指定するときの注意点です。

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

「table>tbody>tr」のように直下の子要素に限定しているのは、td内にtableがあることを考慮してのことです。

td内にtableがない、またはあってもそれも縦並びにするのであれば、子要素に限定する必要はありません。

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

まとめ

CSSでtableを分解して縦並びにする方法

table,tbody,tr,th,tdにdisplay:blockを指定する。

以上、CSSでtableを分解して縦並びにする方法でした。

関連記事