WEB MEMO

CSSでレスポンシブ対応！PCではテーブル表示、スマホではリスト表示させる方法

KOSAERU WEB MEMO
CSSでレスポンシブ対応！PCではテーブル表示、スマホではリスト表示させる方法

横幅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>

WEB MEMO