HTMLの table要素をウィンドウサイズに合わせて可変させてレスポンシブデザインに対応させる

最近、はウェブサイトを PCモニターだけでなくタブレットやスマートフォンなどで閲覧する機会が多くなってきていると思いますが、特にスマートフォンのウィンドウサイズで複数列の table要素はかなり見づらいと感じます。そこで、table要素をデバイスのウィンドウサイズに合わせて可変させる必要性が出てきます。

table要素をウィンドウサイズに合わせて可変させる

ウィンドウサイズに合わせて可変させるといえば、リキッドレイアウトを連想させますが、スマートフォンやタブレット対応なのでレスポンシブデザインが妥当ですね。

HTML body

<table id="demo_1">
<thead>
<tr>
<th>オプション</th>
<th>初期値</th>
<th>説明</th>
</tr>
</thead>
<tbody>
<tr>
<td>callback</td>
<td>$.noop</td>
<td>コールバック関数　callback: function(){}</td>
</tr>
<tr>
<td>callback</td>
<td>$.noop</td>
<td>コールバック関数　callback: function(){}</td>
</tr>
<tr>
<td>callback</td>
<td>$.noop</td>
<td>コールバック関数　callback: function(){}</td>
</tr>
<tr>
<td>callback</td>
<td>$.noop</td>
<td>コールバック関数　callback: function(){}</td>
</tr>
</tbody>
</table>

例として3列5行の table要素を用意します。

CSS

table#demo_1 {
  border: none;
  border-top: 3px solid #5DE4BF;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 30px;
  table-layout: fixed;
  width: 100%;
}

table#demo_1 th,
table#demo_1 td {
  border-bottom: 1px solid #DDD;
  font-size: 0.85em;
  line-height: 1.5;
  padding: 15px;
  text-align: left;
  vertical-align: middle;
}

table#demo_1 th:first-child,
table#demo_1 td:first-child {
  padding-left: 0;
}

table#demo_1 th:last-child,
table#demo_1 td:last-child {
  padding-right: 0;
  width: 45%;
}

table#demo_1 th {
  font-weight: bold;
  vertical-align: top;
}

table#demo_1 td .thTitle {
  display: none;
}

/*ウィンドウサイズが 768px以内の場合に上書きされる*/
@media screen and (max-width: 768px) {

  table#demo_1,
  table#demo_1 caption,
  table#demo_1 tbody,
  table#demo_1 tfoot,
  table#demo_1 tr,
  table#demo_1 th,
  table#demo_1 td {
    display: block;
    width: 100% !important;
  }
  
  table#demo_1 th,
  table#demo_1 td {
    padding-left: 0;
    padding-right: 0;
  }
  
  table#demo_1 th {
    display: none;
  }
    
  table#demo_1 td {
    border: none;
    text-align: left;
  }
  
  table#demo_1 td {
    border-bottom: 1px solid #DDD;
  }
  
  table#demo_1 td:first-child {
    font-weight: bold;
  }
  
  table#demo_1 td:last-child {
    border-bottom: 2px solid #DDD;
  }
  
  /*JavaScriptで追加する要素*/
  table#demo_1 td .inner {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  
  /*JavaScriptで追加する要素*/
  table#demo_1 td .thTitle,
  table#demo_1 td .tdContents {
    display: table-cell;
  }
  
  /*JavaScriptで追加する要素*/
  table#demo_1 td .thTitle {
    font-weight: bold;
    width: 20%;
  }
  
  /*JavaScriptで追加する要素*/
  table#demo_1 td .tdContents {
    padding-left: 20px;
    width: 80%;
  }
}

/*ウィンドウサイズが 480px以内の場合に上書きされる*/
@media screen and (max-width: 480px) {
  
  /*JavaScriptで追加する要素*/
  table#demo_1 td .inner,
  table#demo_1 td .thTitle,
  table#demo_1 td .tdContents {
    display: block;
    width: 100%;
  }
  
  /*JavaScriptで追加する要素*/
  table#demo_1 td .inner {
    table-layout: auto;
  }
  
  /*JavaScriptで追加する要素*/
  table#demo_1 td .tdContents {
    padding: 10px 0 0;
  }
}

一般的な PCモニターでの表示では枠付きのシンプルな表になります。この表をメディアクエリを使用して指定したウィンドウサイズ以下の場合に列を減らしウィンドウサイズの狭いデバイスでも見やすくなるように形を可変させます。ポイントは td要素に display: blockまたは display: list-itemを指定する事です。これで縦に長く続く1列のテーブルが出来上がります。あとはデザインを仕上げて完成ですが th要素は連続で縦に並んでしまうので非表示にして JavaScriptを使い各 td要素に thのテキストを追加します。

JavaScript

$(function(){
  
  var $target = $('table#demo_1');
  
  _adjust($target);
  
  function _adjust(arg){
    
    var $target = arg;
    
    $target.each(function(i){
      
      var $tableTR = $(this).find('tr');
      var $tableTD = $(this).find('td');
      var $tableTH = [];
      
      $tableTD.wrapInner('<div class="tdContents"></div>');
      
      $(this).find('th').each(function(i){
        
        $tableTH[i] = $(this).text();
      });
      
      $tableTR.each(function(i){
        
        $(this).find('td').each(function(i){
          
          $(this).prepend('<div class="thTitle">' + $tableTH[i] + '</div>');
          $(this).wrapInner('<div class="inner"></div>');
        });
      });
    });
  };//_adjust()
});

table要素のレスポンシブ対応を考える際に下記のサイトが非常に参考になりました。いろいろなやり方が解りやすく説明されています。

レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice

デモ table要素をレスポンシブデザインに対応させる

ウィンドウの横幅を768px以下にすると table要素のレイアウトが変化します。

オプション	初期値	説明
callback	$.noop	コールバック関数　callback: function(){}
callback	$.noop	コールバック関数　callback: function(){}
callback	$.noop	コールバック関数　callback: function(){}
callback	$.noop	コールバック関数　callback: function(){}

HTMLの table要素をウィンドウサイズに合わせて可変させてレスポンシブデザインに対応させる

table要素をウィンドウサイズに合わせて可変させる

デモ table要素をレスポンシブデザインに対応させる

Tag

Related Posts