<section class="contentBody">
<div class="responsiveTable">
<table class="responsiveTable__table">
<caption>
レスポンシブ対応のテーブル
</caption>
<thead>
<tr>
<th>項目1</th>
<th>項目2</th>
<th>項目3</th>
<th>項目4</th>
<th>項目5</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="項目1">内容1−1</td>
<td data-label="項目2">内容1−2</td>
<td data-label="項目3">内容1−3</td>
<td data-label="項目4">内容1−4</td>
<td data-label="項目5">内容1−5</td>
</tr>
<tr>
<td data-label="項目1">内容2−1</td>
<td data-label="項目2">内容2−2</td>
<td data-label="項目3">内容2−3</td>
<td data-label="項目4">内容2−4</td>
<td data-label="項目5">内容2−5</td>
</tr>
</tbody>
</table>
</div>
</section>
body{
margin: 0;
padding: 0;
}
.contentBody{
padding: 20px;
}
.responsiveTable{
width: 100%;
margin: 0 auto;
}
.responsiveTable__table {
border-collapse: collapse;
width: 100%;
}
.responsiveTable__table th,
.responsiveTable__table td{
padding: 10px;
border: solid 1px #ccc;
text-align:center;
box-sizing:border-box;
}
.responsiveTable__table th {
background: #eee;
}
@media screen and (max-width: 640px) {
.responsiveTable__table thead{
display:none;
}
.responsiveTable__table {
width: 100%;
}
.responsiveTable__table td {
display: block;
width: 100%;
border-bottom:none;
}
.responsiveTable__table td:first-child{
background: #ccc;
font-weight:bold;
}
.responsiveTable__table td:before{
content: attr(data-label);
font-size: .7rem;
font-weight:bold;
color: #777;
display: block;
}
.responsiveTable__table tr:last-child{
border-bottom: solid 1px #ccc;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.