Bootstrap 的 overflow-y 卷軸

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;}

演示:

點選看效果