BS3 Tables

簡介

在 BS3 中，表格的 CSS 基礎類別就是 .table，固定搭配 <table> 及其相關的標記一齊使用。預設時，底色為白色，沒有邊框。其它的修飾類別有：

.table-bordered: 建立表格的邊框。
.table-striped: 單數列和雙數列用不同底色表示，
.table-hover: 當游標移至列上方時，改變該列的底色。
.table-condensed: 縮減各表格元件間的間隔和留白，讓表格顯得比較緊湊，所佔的空間比較小。
.table-responsive: 這個修飾類別比較特別。表格在預設情況下，當螢幕縮小時，表格會增加格子內容的高度，以完全顯示內容。如果使用了 .table-responsive 這個修飾類別，當螢幕尺寸小於 768px 時，表格便不會以增加格子的高度以容納所有內容，而是產生一個水平捲軸，讓使用者以捲動的方式來觀看內容。另外，使用這個修飾類別的方式是在 .table 元件的外面，再加上一個具有 .table-responsive 的 <div> 元件，請參考範例。

除了以上的修飾類別外，尚有用來改變元件底色的修飾類別，這些類別可以應用在 <tr> 或 <td*gt; 的元件上。修改底色的䫶別如下：

.success
.info
.warning
.danger

以下為 BS3 v3.3.6 的 bootstrap.css 樣式表中有關 .table 的部份樣式設定，這裡只列出了比較重要的一部份，其它沒有列出的部份都是在修改底色及間距，為了節省篇幅，就不在這裡列出了。

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}
.table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd;
}
.table-bordered {
    border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
    border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}
.table-hover > tbody > tr:hover {
    background-color: #f5f5f5;
}
table col[class*="col-"] {
    position: static;
    display: table-column;
    float: none;
}
table td[class*="col-"],
table th[class*="col-"] {
    position: static;
    display: table-cell;
    float: none;
}
.table-responsive {
    min-height: .01%;
    overflow-x: auto;
}
@media screen and (max-width: 767px) {
    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd;
    }
    .table-responsive > .table {
        margin-bottom: 0;
    }
    .table-responsive > .table > thead > tr > th,
    .table-responsive > .table > tbody > tr > th,
    .table-responsive > .table > tfoot > tr > th,
    .table-responsive > .table > thead > tr > td,
    .table-responsive > .table > tbody > tr > td,
    .table-responsive > .table > tfoot > tr > td {
        white-space: nowrap;
    }
    .table-responsive > .table-bordered {
        border: 0;
    }
    .table-responsive > .table-bordered > thead > tr > th:first-child,
    .table-responsive > .table-bordered > tbody > tr > th:first-child,
    .table-responsive > .table-bordered > tfoot > tr > th:first-child,
    .table-responsive > .table-bordered > thead > tr > td:first-child,
    .table-responsive > .table-bordered > tbody > tr > td:first-child,
    .table-responsive > .table-bordered > tfoot > tr > td:first-child {
        border-left: 0;
    }
    .table-responsive > .table-bordered > thead > tr > th:last-child,
    .table-responsive > .table-bordered > tbody > tr > th:last-child,
    .table-responsive > .table-bordered > tfoot > tr > th:last-child,
    .table-responsive > .table-bordered > thead > tr > td:last-child,
    .table-responsive > .table-bordered > tbody > tr > td:last-child,
    .table-responsive > .table-bordered > tfoot > tr > td:last-child {
        border-right: 0;
    }
    .table-responsive > .table-bordered > tbody > tr:last-child > th,
    .table-responsive > .table-bordered > tfoot > tr:last-child > th,
    .table-responsive > .table-bordered > tbody > tr:last-child > td,
    .table-responsive > .table-bordered > tfoot > tr:last-child > td {
        border-bottom: 0;
    }
}

範例

範例中展示了二個表格，各應用了不同的修飾類別，以展示各修示類別的作用。下方的表格在螢幕縮小至 768px 以下時，會產生水平捲軸，可以左右移動表格，以觀看內容。表格中有一列中的內容特別長，在變更螢幕尺寸時，注意一下這一列的變化。

圖 1. 範例

CSS

<style>
html {
    width:100%;
    height:100%;
}
body {
    margin: 0 auto;
    max-width: 1000px;
    padding: 20px;
}
</style>

CSS 中沒有特別的樣式需要定義。

HTML

<body>
    
        
            
                Header 1
                Header 2
                Header 3
            
        
        
            
                Cell
                Cell
                Cell
            
            
                Cell
                Cell
                Cell
            
            
                Cell
                Cell
                Cell
            
        
        
            
                Footer 1
                Footer 2
                Footer 3
            
        
  
 
    
     
            
                
                    Header 1
                    Header 2
                    Header 3
                    Header 4
                
            
            
                
                    A very long text content here ...
                    A very long text content here ...
                    A very long text content here ...
                    A very long text content here ...
                
                
                    Cell
                    Cell
                    Cell
                    Cell
                
                
                    Cell
                    Cell
                    Cell
                    Cell
                
            
     
    
</body>

Header 1	Header 2	Header 3
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell
Footer 1	Footer 2	Footer 3

Header 1	Header 2	Header 3	Header 4
A very long text content here ...	A very long text content here ...	A very long text content here ...	A very long text content here ...
Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell

第 24 行，.danger 應用在 <td&gr; 的標記中。
注意第 36 行，.table-responsive 所在的位置，必須包覆定義 .table 類別的元件。
第 59 行， .warning 應用在 <tr> 的標記中。

熊伯的外接硬碟

2016年6月30日星期四

BS3 Tables

BS3 Tables

簡介

範例

CSS

HTML

沒有留言:

張貼留言

2016年6月30日 星期四

BS3 Tables

CSS

HTML

沒有留言:

張貼留言

2016年6月30日星期四