W3Cschool
恭喜您成為首批注冊用戶
獲得88經驗值獎勵
通過把任意的 .table 包在 .table-responsive class 內,您可以讓表格水平滾動以適應小型設備(小于 768px)。當在大于 768px 寬的大型設備上查看時,您將看不到任何的差別。
代碼如下:
<div class="table-responsive">
<table class="table">
<caption>響應式表格布局</caption>
<thead>
<tr>
<th>產品</th>
<th>付款日期</th>
<th>狀態(tài)</th></tr>
</thead>
<tbody>
<tr>
<td>產品1</td>
<td>23/11/2013</td>
<td>待發(fā)貨</td></tr>
<tr>
<td>產品2</td>
<td>10/11/2013</td>
<td>發(fā)貨中</td></tr>
<tr>
<td>產品3</td>
<td>20/10/2013</td>
<td>待確認</td></tr>
<tr>
<td>產品4</td>
<td>20/10/2013</td>
<td>已退貨</td></tr>
</tbody>
</table>
</div>
結果如下所示:
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: