<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <table class="table table-striped table-rwd-name table-hidden"> <thead class="table-only-hide"> <tr> <th>商品名稱</th> <th width="150">購買數量</th> <th width="200">單價</th> </tr> </thead> <tbody> <tr> <td data-label="商品名稱">Col 1</td> <td data-label="購買數量">Col 2</td> <td data-label="單價">Col 3</td> </tr> <tr> <td data-label="商品名稱">Col 1</td> <td data-label="購買數量">Col 2</td> <td data-label="單價">Col 3</td> </tr> <tr> <td data-label="商品名稱">Col 1</td> <td data-label="購買數量">Col 2</td> <td data-label="單價">Col 3</td> </tr> <tr> <td data-label="商品名稱">Col 1</td> <td data-label="購買數量">Col 2</td> <td data-label="單價">Col 3</td> </tr> <tr> <td data-label="商品名稱">Col 1</td> <td data-label="購買數量">Col 2</td> <td data-label="單價">Col 3</td> </tr> <tr> <td data-label="商品名稱">Col 1</td> <td data-label="購買數量">Col 2</td> <td data-label="單價">Col 3</td> </tr> <tr> <td data-label="商品名稱">Col 1</td> <td data-label="購買數量">Col 2</td> <td data-label="單價">Col 3</td> </tr> <tr> <td data-label="商品名稱">Col 1</td> <td data-label="購買數量">Col 2</td> <td data-label="單價">Col 3</td> </tr> </tbody> </table>

/*表格遮蔽*/ .table-hidden tbody{ overflow-y: scroll; height: 200px; display: block; } .table-hidden tr { width: 100%; display: inline-table; } /*另一種RWD*/ .table-rwd-name{background-color: rgba(255,255,255,0.5);} .table-rwd-name tfoot th{ background-color: #FFF; border-bottom: 1px solid #F90 !important; text-align: left; background-color: #fcf5e6; } @media (max-width: 736px) { /*另一種RWD*/ .table-rwd-name tr, .table-rwd-name td, .table-rwd-name th { display: block; border-top: 0 !important; } .table-rwd-name td { text-align: left; font-size: 15px; overflow: hidden; width: 100%; } .table-rwd-name td:before { content: attr(data-label); float: left; text-transform: uppercase; font-weight: bold; margin-right: 10px } thead.table-only-hide { display: none !important; } } @media (min-width: 736px) { .table-hidden td[data-label="購買數量"]{ width:150px;} .table-hidden td[data-label="單價"]{ width:183px;} }