<table>
<caption>付款紀錄</caption>
<thead>
<tr>
<th>方案內容</th>
<th>金額</th>
<th>數量</th>
<th>贊助日期</th>
<th>贊助狀態</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="方案">一枝草一點露,一人一百支持 TingChi</td>
<td data-label="金額">$100</td>
<td data-label="數量">1</td>
<td data-label="贊助日期">2016-12-26</td>
<td data-label="贊助狀態">付款成功</td>
</tr>
<tr>
<td data-label="方案">一枝草一點露,一人一百支持 TingChi</td>
<td data-label="金額">$100</td>
<td data-label="數量">1</td>
<td data-label="贊助日期">2016-12-26</td>
<td data-label="贊助狀態" data-status="success">付款成功</td>
</tr>
<tr>
<td data-label="方案">一枝草一點露,一人一百支持 TingChi</td>
<td data-label="金額">$100</td>
<td data-label="數量">1</td>
<td data-label="贊助日期">2016-12-26</td>
<td data-label="贊助狀態" data-status="fail">付款失敗
<div class="repay-information">
<button>重新付款</button>
<button>刪除紀錄</button>
</div>
</td>
</tr>
</tbody>
</table>
table {
width: 100%;
font-family: "PingFang TC";
td { text-align: cetner; }
}
@media screen and (max-width: 500px) {
table > thead {
border: 0;
display: none;
position: absolute;
}
tbody tr {
border: 1px solid #aaa;
margin-bottom: 1em;
display: block;
}
td:first-child {
display: block;
font-weight: bold;
text-align: center;
}
td:not(:first-child) {
margin-top: 1em;
margin-bottom: 1em;
display: block;
text-align: right;
&:before {
float: left;
content: attr(data-label);
}
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.