Bootstarp--全局CSS樣式之表格

表格在實際開發中可以說是非常常見的，但是有很多人不喜歡使用表格，但個人覺得在簡單的界面布局中使用表格還是很簡單的。畢竟人家給了表格這元素，而你卻不去使用，貌似有點不解風情。

下面簡單介紹Bootstrap中給的表格。

1，帶條紋的表格

通過 .table-striped 類可以給 <tbody> 之內的每一行增加斑馬條紋樣式。注意，這個功能是不支持IE8的。

代碼：

<div class="container">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>標題</th>
                    <th>標題</th>
                    <th>標題</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>內容1</td>
                    <td>內容2</td>
                    <td>內容3</td>
                 
                </tr>
                <tr>
                    <td>內容1</td>
                    <td>內容2</td>
                    <td>內容3</td>
                   
                </tr>
                <tr>
                    <td>內容1</td>
                    <td>內容2</td>
                    <td>內容3</td>
                </tr>
            </tbody>
        </table>
    </div>

 

結果：

 

2,帶邊框的表格

添加 .table-bordered 類為表格和其中的每個單元格增加邊框。

代碼：

 <div class="container">
        <table class="table table-bordered">
           。。。。。
        </table>
    </div>

 

效果：

 

3,鼠標懸停事件

通過添加 .table-hover 類可以讓 <tbody> 中的每一行對鼠標懸停狀態作出響應。

代碼：

<div class="container">
        <table class="table table-bordered table-hover">
。。。。。。。
        </table>
    </div>

 

效果：

 

4，緊縮表格

通過添加 .table-condensed 類可以讓表格更加緊湊，單元格中的內補（padding）均會減半。

<table class="table table-condensed">
  ...
</table>

 

5，狀態類

通過這些狀態類可以為行或單元格設置顏色。

 

代碼：

<div class="container">
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>標題</th>
                    
                </tr>
            </thead>
            <tbody>
                
                <tr class="active"><td>內容</td></tr>
                <tr class="success"><td>內容</td></tr>
                <tr class="warning"><td>內容</td></tr>
                <tr class="danger"><td>內容</td></tr>
                <tr class="info"><td>內容</td></tr>

               
                <tr class="active"><td>內容</td></tr>
                <tr class="success"><td>內容</td></tr>
                <tr class="warning"><td>內容</td></tr>
                <tr class="danger"><td>內容</td></tr>
                <tr class="info"><td>內容</td></tr>
            </tbody>
        </table>
    </div>

效果

 

6,響應式表格

將任何 .table 元素包裹在 .table-responsive 元素內，即可創建響應式表格，其會在小屏幕設備上（小於768px）水平滾動。當屏幕大於 768px 寬度時，水平滾動條消失。

（1）垂直方向的內容截斷

響應式表格使用了 overflow-y: hidden 屬性，這樣就能將超出表格底部和頂部的內容截斷。特別是，也可以截斷下拉菜單和其他第三方組件

（2）Firefox 和 fieldset 元素

Firefox 瀏覽器對 fieldset 元素設置了一些影響 width 屬性的樣式，導致響應式表格出現問題。除非使用我們下面提供的針對 Firefox 的 hack 代碼，否則無解：

復制

@-moz-document url-prefix() { fieldset { display: table-cell; } }

表格就到這里了，想要了解更多的實例或內容，請到官方網站查閱。文章有什么不妥之處，請指出，謝謝。