横幅480px以下になるとリスト表示となるます。
<style>
.respo-table{
width:100%;
border-left:1px solid #ddd;
border-top:1px solid #ddd;
}
.respo-table th{
background-color:#eee;
}
.respo-table th,
.respo-table td{
border-right:1px solid #ddd;
border-bottom:1px solid #ddd;
}
@media only screen and (max-width: 480px) {
.respo-table tr {
display:block;
margin-bottom: 10px;
}
.respo-table th {
display:block;
width: 100%;
}
.respo-table td {
display: list-item;
border:none;
}
.respo-table td.rank01:before { content: "第1位 : ";}
.respo-table td.rank02:before { content: "第2位 : ";}
.respo-table td.rank03:before { content: "第3位 : ";}
.respo-table th.rank_num{ display:none;}
}
</style>
<table class="respo-table">
<thead>
<tr>
<th>俺のAV女優ランキング</th>
<th class="rank_num">1位</th>
<th class="rank_num">2位</th>
<th class="rank_num">3位</th>
</tr>
</thead>
<tr>
<th>2015年</th>
<td class="rank01">市川まさみ</td>
<td class="rank02">伊東ちなみ</td>
<td class="rank03">さくらゆあ</td>
</tr>
<tr>
<th>2014年</th>
<td class="rank01">希美まゆ</td>
<td class="rank02">明日花キララ</td>
<td class="rank03">宇都宮しをん</td>
</tr>
<tr>
<th>2013年</th>
<td class="rank01">森ななこ</td>
<td class="rank02">かすみりさ</td>
<td class="rank03">絵色千佳</td>
</tr>
</table>