レスポンシブに対応したテーブルの例

どうも、洗濯して干して家を出たら雨が降ってそわそわしていた、よっしぃーです。

今回、最近悩まされる横に長いテーブルの対応方法を考えようと思います。

すでに、この問題に関して皆さんがいろいろなアイデアを出していて、どれがいいかなぁっていう感じでした。（参考サイト）

ちょっと困ったタイプのテーブルを対応しなくてはいけなくなった時、見やすさなどを考慮した結果、少し形を変えることにしました。

html

<table>
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>1-3</th>
      <th>4-6</th>
      <th>7-9</th>
      <th>10-14</th>
      <th>15-18</th>
      <th>19-24</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>A</th>
        <td>cont</td>
        <td>cont</td>
        <td>cont</td>
        <td>cont</td>
        <td>cont</td>
        <td>cont</td>
    </tr>
    <tr>
      <th>B</th>
        <td>cont</td>
        <td>cont</td>
        <td>cont</td>
        <td>cont</td>
        <td>cont</td>
        <td>cont</td>
    </tr>
    <tr>
      <th>C</th>
        <td>cont</td>
        <td>cont</td>
        <td>cont</td>
        <td>cont</td>
        <td>cont</td>
        <td>cont</td>
    </tr>
    <tr>
      <th>D</th>
        <td>cont</td>
        <td>cont</td>
        <td>cont</td>
        <td>cont</td>
        <td>cont</td>
        <td>cont</td>
    </tr>
  </tbody>

css

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

th, td {
  text-align: center;
  border: 1px solid #CCC;
  padding 10px;
  box-sizing: border-box;
}
tr{
  box-sizing: border-box;
}


@media screen and (max-width: 640px) { /* スマホ時のスタイル */
  thead {
    display: none;
  }

  tr {
    display: block;
    position: relative;
    border: 1px solid #CCC;
  }

  th {
    display: block;
    position: absolute;
    width: 50px;
    height: 100%;
    left: 0;
    top: 0;
    border: none;
    background: #FFF;
    z-index: 2;
  }

  td {
    position: relative;
    display: block;
    overflow: hidden;
    text-align: right;
    padding: 10px 10px 10px 60px;
    margin-top: -1px;
    border-top: 1px dotted #CCC;
    border-bottom: none;
  }
  td:hover {
    background: #DEA;
  }
  td:before {
    content: attr(data-head);
    float: left;
  }
}

$(function() {
  var theadConts = $('thead th');
  $(window).on('resize load', function() {
    if ($('thead').css('display') == 'none') {
      for(var x=1; x-1 < theadConts.length; x++){
        var detaHead = $('thead th:nth-child('+ x +')').text();
        $('tr td:nth-child('+ x +')').attr('data-head', detaHead);
      }
    } else {
      for(var x=0; x <$('thead').length; x++){
        $('tr td:nth-child('+ x +')').attr('data-head', '');
      }
    }
  });
});

こんなかんじですねぇ。

See the Pen Responsive Table Style by よっしぃー (@yoshiiiiie) on CodePen.

見出しとそれがどういう項目なのか、それの内容は？
が、見やすくなったのかなぁ・・・と思ったり。

カンタンに説明すると、