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