tableをデータ属性を使ってレスポンシブにする方法

tableのレスポンシブ対応といえば、　th,tdをdisplay:block; width:100%　でOK！と思っていたんですが、縦軸にも横軸にも見出しがある場合それでは対応できない…。

そんなときに役立つ方法です！

まずはHTML。

<table class="table-01">
          <thead>
            <tr>
              <th></th>
              <th>商品A</th>
              <th>商品B</th>
              <th>商品C</th>
              <th>商品D</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>高さ</th>
                <td data-label="商品A">100</td>
                <td data-label="商品B">150</td>
                <td data-label="商品C">200</td>
                <td data-label="商品D">250</td>
            </tr>
          </tbody>
        </table>

続いてcssはこちら。

@media screen and (max-width: 768px) {
  
  .table-01 tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: .8rem;
    color:#6298c6;    
    margin-bottom: 0.2rem;
  }
}

HTMLでデータ属性　data-label=” “　を設定、cssの content:attr()　で呼び出すという形です。

実際の結果はこちらをご覧ください。

See the Pen LYRXyZM by Chihiro Mitome (@chihiromtm) on CodePen.

positionプロパティを使って横並びにして表示してもよいし、いろいろ応用が利きそうです！