tableでcss擬似要素のcontent: attr()を使用したレスポンシブ方法

tableのレスポンシブ対応ってすごく面倒だと思いませんか?
僕はできればtable自体を使いたくないと思ってるくらいですw

ただそうも言ってられないこともあると思います。
tableのレスポンシブ対応は

  • table内で横スクロールを実装する
  • 単純にdisplay: block;で対応
  • 手抜きしてwidth: 100%;※できればやらないで下さい。横に長いtableだと潰れるので

などがあると思いますが
今回はcss擬似要素のcontent: attr();を使用したレスポンシブ方法をご紹介します。

tableでcss擬似要素のcontent: attr()を使用したレスポンシブ方法

まず始めに今回使用する一番重要なcontent: attr();についてです。

css擬似要素のcontent: attr();の使い方

content: attr();でhtmlに設定している属性の値を取得することが出来ます。
data属性の値を取得するのが一般的です。

<p data-label="トレーナー">サトシ</p>
<p data-label="パートナーポケモン">ピカチュウ</p>
p {
  &:before {
    content: attr(data-label)":";
  }
}

ブラウザでの表示結果

トレーナー:サトシ
パートナーポケモン:ピカチュウ

jsを使わずともこのようにまとめて要素毎に取得してくれます。便利!

この方法をtableのレスポンシブに使用していきます!

それではtableのレスポンシブ化です!

最初に結果をお見せします

htmlは以下のものを使用しています。

重要なのはdata属性のdata-labelです。

<table>
    <thead>
        <tr>
            <td></td>
            <th>出身</th>
            <th>ポケモン</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>サトシ</th>
            <td data-label="出身">マサラタウン</td>
            <td data-label="ポケモン">ピカチュウ</td>
        </tr>
        <tr>
            <th>カスミ</th>
            <td data-label="出身">ハナダシティ</td>
            <td data-label="ポケモン">ヒトデマン</td>
        </tr>
        <tr>
            <th>タケシ</th>
            <td data-label="出身">ニビシティ</td>
            <td data-label="ポケモン">イワーク</td>
        </tr>
    </tbody>
</table>

CSS(Sass)です

cssはサンプルなので各自調整して下さい。

やっていることはtr,th,tdをdisplay: block;してあとはtdにcontent: attr()してるだけです。

$sp : 500px;

//tableベース設定
table {
  border-collapse: collapse;
  margin: 0 auto;
  max-width: 600px;
  width: 100%;
  table-layout: fixed;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  @media screen and (max-width: $sp) {
    border: none;
  }
  th,
  td {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    @media screen and (max-width: $sp) {
      border: none;
    }
  }//th td
}//table
//===================tableベース設定

thead {
  @media screen and (max-width: $sp) {
    display: none;
  }
  tr {
    background: #eee;
  }
  th {
    padding: 1em;
  }
}//thead

tbody {
  tr {
    background-color: #fff;
    @media screen and (max-width: $sp) {
      display: block;
      margin-bottom: 30px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }//tr
  th,
  td {
    padding: 1em;
    vertical-align: middle;
  }//th td
  th {
    @media screen and (max-width: $sp) {
      background-color: #eee;
      display: block;
      border-right: none;
    }
  }//th
  td {
    @media screen and (max-width: $sp) {
      position: relative;
      display: block;
      padding-left: 6em;
      border-bottom: solid 1px #ccc;
    }
    &:before {
      @media screen and (max-width: $sp) {
        position: absolute;
        top: 1em;
        left: 10px;
        display: block;
        content: attr(data-label);
        font-weight: 600;
      }
    }
  }
}//tbody

最後に

tableのレスポンシブ方法はこの記事最初にお話しましたが色々あります!
その色々な方法の中からデザインにあったものを実装しましょう!

スマホにおけるtableは見やすさが全てです!
width100%だけ指定してtableがスマホで潰れるなんてことにならないようにして下さい。

ただ面倒ですね…w