横幅480px以下になるとリスト表示となるます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<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> |
