注目キーワード

CSSでテーブルを横並びから縦並びに切り替える

CSSでテーブルを横並びから縦並びに切り替える
  1. HOME
  2. CSS
  3. CSSでテーブルを横並びから縦並びに切り替える

HTMLのtable要素でth、tdをマークアップしたテーブルをCSSで横並びから縦並びのレイアウトに切り替える記述を記事にまとめました。

CSSでテーブルを横並びから縦並びに切り替えることでレスポンシブなテーブルを作成することができます。

 

目次

まずはCSSでテーブルを横並びに

 

CSSでテーブルを縦に並べる前の横並びテーブルは会社概要に使うことが多い左がthで右がtdをマークアップしたテーブルの構造です。

 

<table class="kaisya-gaiyou">
    <tr>
        <th>会社名</th>
        <td>◯◯◯◯株式会社</td>
    </tr>
    <tr>
        <th>所在地</th>
        <td>
            ◯◯県◯◯市◯-◯-◯<br>
            TEL：0000-00-0000<br>
            FAX：0000-00-0000
        </td>
    </tr>
    <tr>
        <th>代表取締役</th>
        <td>掃除　マメオ</td>
    </tr>
    <tr>
        <th>資本金</th>
        <td>5,000万円</td>
    </tr>
    <tr>
        <th>事業内容</th>
        <td>
            <ul class="jigyou-list">
                <li>ほうき・ちりとりの販売並びに納入等代理業</li>
                <li>ほうき・ちりとりの製作及び点検と修理</li>
            </ul>
        </td>
    </tr>
</table>

 

テーブルのHTMLに適用するCSSは以下のようにボーダー、パディング、背景色などでデザインしておきます。

 

.kaisya-gaiyou {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
}

.kaisya-gaiyou th,
.kaisya-gaiyou td{
    padding: 16px;
    font-weight: normal;
    border-left: 1px solid #333;
    border-bottom: 1px solid #333;
}
.kaisya-gaiyou th{
    background-color: #CDEAFF;
}
.kaisya-gaiyou td{
    background-color: #fbf9f9;
}

.jigyou-list{
    list-style: none;
    padding: 0;
}
.jigyou-list li{
    margin: 5px 0;
}

 

上記CSSの記述を適用したテーブルは次の画像のように横並びに表示します。

 

 

CSSでテーブルを縦並びに切り替える

 

CSSで横並びにデザインしたテーブルはメディアクエリとdisplay:blockで縦並びに切り替えます。

 

@media screen and (max-width:640px){
    .kaisya-gaiyou th,
    .kaisya-gaiyou td{
        display: block;
        text-align: left;
    }
}

 

Advertisement

 

たとえばメディアクエリを記述してテーブルを640pxの画面幅まで狭くなったときに縦並びに切り替える場合には、CSSで@media screen and (max-width:640px)と記述したメディアクエリ内にthとtdのセレクタを記述してdisplay:blockを適用します。

 

 

するとCSSでテーブルを横並びから縦並びにメディアクエリのブレイクポイントで指定した幅で切り替えることができます。

 

テーブルでthが上にある場合の縦並び

 

thとtdをdisplay:blockにするとテーブルは縦に並びますが、テーブルの表で一番上にthだけをまとめたtrがマークアップしてある場合には、縦並びにすると見出しのthだけで縦並びになってしまいます。

 

 

そんなときにはテーブル要素内の見出しをまとめているtr要素にクラス付けをしてCSSのメディアクエリ内にクラスセレクタを作りdisplay:noneを適用します。

 

@media screen and (max-width: 640px) {
    .t-head{
        display: none;
    }
    .th_01,
    .td_01{
        display: block;
        text-align: center;
    }
}

 

Advertisement

 

すると以下の画像のように縦並びのテーブルをブレイクポイントで切り替えて表示することができます。

 

 

このときCSSのdisplay:noneでテーブル上部のthを非表示にした状態でテーブルを縦並びにしているため横並びテーブルのときに表示していたセルの内容は非表示になってしまいます。

そこで縦並びテーブルを見やすくするためにテーブルのHTMLでthとtdにカスタムデータ属性を追加します。

以下のtable要素のthとtdに付与したdata-t-labelの記述がカスタムデータ属性の記述です。

 

<table class="table_01">
    <tr class="tr_01 t-head">
        <th style="visibility: collapse;"></th>
        <th>料金</th>
        <th>特徴</th>
    </tr>
    <tr class="tr_01">
        <th data-t-label="ラベル">ほうき</th>
        <td data-t-label="料金">100円</td>
        <td data-t-label="特徴">ゴミをすばやく集めることが可能</td>
    </tr>
    <tr class="tr01">
        <th data-t-label="ラベル">ちりとり</th>
        <td data-t-label="料金">100円</td>
        <td data-t-label="特徴">ゴミを瞬時に収集</td>
    </tr>
</table>

 

横並びのテーブルのときにthで表示している料金と特徴を縦並びテーブルの場合はカスタムデータ属性の値で料金と特徴を表示することができます。

 

 

@media screen and (max-width: 640px) {
    .t-head{
        display: none;
    }
    .table_01 th,
    .table_01 td{
        display: block;
        text-align: center;
    }
    .table_01 td::before{
        content: attr(data-t-label);
        display: block;
        color: #999;
        margin: 8px 0;
    }
}

 

カスタムデータ属性の値の表示方法はtdをCSSで擬似要素にしたセレクタを作成しcontentの値にattr(data-t-label)を指定します。カッコ内のdata-t-labelはテーブルのHTML側でthとtdに記述したカスタムデータ属性の値が表示します。

CSSカテゴリの最新記事