テーブルタグのレスポンシブ対応

参考：https://liginc.co.jp/330259
サイトがなくなると困るので、こちらにもメモ。

（１）テーブル→リスト
HTML

<table>
  <thead>
    <tr>
      <th>Big heading</th>
      <th>Big heading</th>
      <th>Big heading</th>
      <th>Big heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Title</th>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
    <tr>
      <th>Title</th>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
   </tbody>
</table>

SCSS

@media only screen and (max-width:420px){
  table{
    tr{
      display: block;
      width: 100%;
    }
     thead{
      display: none;
    }
    tbody{
    display: block;
    width: 100%;
    overflow: hidden;
      th{
        list-style:none;
      }
      td{
        margin-left: 40px;
      }
      th,td{
        width: 100%;
        display: list-item;
      }
    }
  }
}

（２）HTML+CSS+JS/縦ライン重視？
HTML

<table class="js-target">
  <thead>
    <tr>
      <th>Big heading1</th>
      <th>Big heading2</th>
      <th>Big heading3</th>
      <th>Big heading4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content1</td>
      <td>Content2</td>
      <td>Content3</td>
      <td>Content4</td>
    </tr>
    <tr>
      <td>Content5</td>
      <td>Content6</td>
      <td>Content7</td>
      <td>Content8</td>
    </tr>
   </tbody>
</table>

SCSS

@media only screen and (max-width:420px){
  table{
    border-bottom:1px solid #ccc;
    tr{
      display: block;
      width: 100%;
    }
    tbody{
    display: block;
    width: 100%;
    overflow: hidden;
      th{
        list-style:none;
      }
      td{
        margin-left: 0px;
        border:1px solid #ccc;
        border-bottom: none;
      }
      th,td{
        width: 100%;
        display: block;
      }
    }
  }
  .table-head{
    display: none !important;
  }
  .row{
    margin-bottom: 30px;
    border-bottom: 1px solid #ccc;
  }
  .table{
    .column{
      width: 100%;
      display: block;
      border:1px solid #ccc;
      border-bottom: none;
      position:relative;
    }
  }
  tbody{
    position:relative;
    .column{
      &:before{
        content: attr(data-label);
        display: block;
        margin-bottom: 10px;
        font-weight: bold;
        color: #000;
        font-size:18px;
      }
    }
  }
}

JS

let $target = $('.js-target');

$target.each(function(){
  let i = '',
      $target_thead_col = $(this).find('thead th').length;
  for ( i=0; i<= $target_thead_col; i++){
    let $target_col_label =  $(this).find('tr th:nth-child('+ i +')').text();
    $(this).find('tr td:nth-child('+ i +')').replaceWith(function(){
        return $('<div class="column" data-label="'+ $target_col_label +'">').append($(this).contents());
        });
  }
  $(this).find('td').replaceWith(function(){
       return $('<div class="column">').append($(this).contents());
     });
  $(this).find('th').replaceWith(function(){
       return $('<div class="column">').append($(this).contents());
     });
  $(this).find('tr').replaceWith(function(){
       return $('<div class="row">').append($(this).contents());
     });
  $(this).find('thead').replaceWith(function(){
       return $('<div class="table-head">').append($(this).contents());
     });
  $(this).replaceWith(function(){
       return $('<div class="table">').append($(this).contents());
     });
});

あとはテーブルをDIVで囲って、DIVタグに対してover-flow:scroll設定する方法（テーブル全体をスクロール）と
テーブルヘッドを固定にしてコンテンツ部分だけスクロールする方法。