Bootstrap 的 table 變化太少了!! 最近又莫名的喜歡研究Bootstrap所以又改了一些東西
再來客戶又想變化不同的顯示方式，所以又寫了一個表格呈現方式
bootstrap他原本的標籤，預設的標籤之外自己再多一個標籤.table-hidden當然也可以搭配上一個文章RWD TABLE 的效果
html如下：
<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>
改寫Bootstrap 大部分都是要改寫CSS，所以要非常了解Bootstrap它本身的標籤，還有熟讀CSS語法
CSS 如下：
.table-hidden tbody{
overflow-y: auto;/*設定卷軸 auto 是有超過我的高度的時候才會出現卷軸*/
height: 200px;/*自己設定*/
display: block;
}
.table-hidden tr {
width: 100%;
display: inline-table;
}
/*因為 display: block 打壞了 tbody 的結構，
所以 thead 的 tr 跟 tbody 的 td 寬度拆開了，
所以必須重新設定表格的寬度，
但是 tbody 有包括卷軸 針對bootstrap 去修正卷軸
*/
.table-hidden thead th[data-th="其他"]{ width:400px;}
/*因為 tbody 多了卷軸 尺寸多了 17px*/
.table-hidden tbody td[data-th="其他"]{ width:383px;}
/*只要最後面尺寸不一樣!!其他的尺寸一樣就好*/
.table-hidden td[data-th="序號"],
.table-hidden th[data-th="序號"]{ width:50px;}
.table-hidden td[data-th="售價"],
.table-hidden th[data-th="售價"]{ width:100px;}
演示：