レスポンシブデザイン　table 01

【HTML】

 

<table class=”tbl01″>
<tbody>
<tr>
<th>あああああああああああああ</th>
<td>いいいいいいいいいいいいい</td>
</tr>
<tr>
<th>あああああああああああああ</th>
<td>いいいいいいいいいいいいい</td>
</tr>
<tr>
<th>あああああああああああああ</th>
<td>いいいいいいいいいいいいい</td>
</tr>
</tbody>
</table>

 

【CSS】

/*—————————*/
/* レスポンシブ */
/* TABLEレイアウト1 */
/*—————————*/

.tbl01{
border: none;
}
.tbl01 th{
background: #1ab5b1;
color: #ffffff;
border: 1px solid #eeeeee;
padding: 10px;
vertical-align: top;
white-space: nowrap;
}
.tbl01 td {
border-bottom: 1px solid #eeeeee;
padding: 10px;
}

@media screen and (max-width: 640px) {
.last td:last-child {
border-bottom: solid 1px #ccc;
width: 100%;
}
.tbl01 {
width: 80%;
}
.tbl01 th,
.tbl01 td {
border-bottom: none;
display: block;
width: 100%;
}
.tbl01 td {
margin-bottom: 10px;
}
}