ブログ

前回、スマホサイトでのtableの対処方法をご紹介しましたが、最上部X軸のthが消えてしまって、何の表だかわからないという問題が残ってしまいました。
確かに、表が更に複雑化してきた場合、何が何だかわからなくなってしまうなぁ…と。
そんな時の小技です。
何と、data-label属性を使って、セル内に強引に表示させてしまうというもの。
現在、お客様のサイトで実装して使えたので、後日、当サイトにも組み込んで、スクリーンショットを掲載しようと思います。
今回はとりあえず、ソースのみ先行で掲載します。
htmlソース

<table class="sample">
<thead>
<tr>
<th>ケース</th>
<th>Aパターン</th>
<th>Bパターン</th>
<th>Cパターン</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="ケース">ケース01</td>
<td data-label="Aパターン">あいうえお</td>
<td data-label="Bパターン">かきくけこ</td>
<td data-label="Cパターン">さしすせそ</td>
</tr>
<tr>
<td data-label="ケース">ケース02</td>
<td?data-label="Aパターン">たちつてと</td>
<td data-label="Bパターン">なにぬねの</td>
<td data-label="Cパターン">はひふへほ</td>
</tr>
<tr>
<td data-label="ケース">ケース03</td>
<td?data-label="Aパターン">まみむめも</td>
<td?data-label="Bパターン">やゆよ</td>
<td?data-label="Cパターン">らりるれろ</td>
</tr>
</tbody>
</table>

CSS

table.sample{
font-size: 14px;
font-size: 1.4rem;
line-height:1.3em;
font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
width:98%;
margin-left:auto;
margin-right:auto;
margin-top:10px;
margin-bottom:10px;
border-collapse:collapse;
table-layout: fixed;
}
table.sample td, table.sample th{
border:1px solid #666666;
}
table.sample td{
padding:1%;
text-align:center;
}
table.sample thead th{
padding:1%;
text-align:center;
background-color:#DDFFCC;
letter-spacing:1px;
}
/*↓スマホ時の表示変更*/
@media screen and (max-width: 480px) {
table.sample{
font-size:12px;
font-size:1.2rem;
line-height:1.2em;
border:0;
}
table.sample thead{
display:none;
}
table.sample tr{
margin-bottom:10px;
display:block;
border-bottom:2px solid #ddd;
}
table.sample td{
display:block;
text-align:right;
font-size:13px;
border-bottom:1px dotted #000;
}
table.sample td:last-child{
border-bottom:0;
}
table.sample td:before {
content:attr(data-label);
float:left;
font-weight: bold;
}

ポイントはdata-label。
これは使えそうだ！