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

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

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

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

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

html

[html] <table>
<thead>
<tr>
<th> </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>[/html]

css

[html] 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;
}
}[/html]

[html] $(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’, ”);
}
}
});
});[/html]

こんなかんじですねぇ。

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

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

カンタンに説明すると、