Bootsstrap 表格樣式

一．表格樣式

1. 使用.table 給表格設定一個基類，這是表格的基本樣式；

<table class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>總成績</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>張三</td>
            <td>男</td>
            <td>98</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>女</td>
            <td>94</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>男</td>
            <td>97</td>
        </tr>
    </tbody>
</table>      

2. 使用.table-dark 樣式，啟用顔色反轉對比效果；

<table class="table table-dark">      

3. 在<thead>使用.thead-light 或.thead-dark 實作淺黑或深灰色調的标頭；

<thead class="thead-light">      

4. 使用.table-striped 實作資料表的條紋狀顯示；

<table class="table table-striped">      

5. 條紋狀顯示也适用于反轉色調上；

<table class="table table-dark table-striped">      

6. 預設情況下，邊框是不完全的，使用.table-bordered 設定表格邊框；

<table class="table table-bordered">      

7. 表格邊框也可以作用域反轉色調上；

<table class="table table-bordered table-dark">      

8. 使用.table-borderless 設定無邊框；

<table class="table table-borderless">      

9. 無邊框效果也可以作用于反轉色調上；

<table class="table table-borderless table-dark">      

10. 使用.table-hover 實作一行懸停效果；

<table class="table table-hover">      

11. 行懸停效果也可以作用于反轉色調上；

<table class="table table-hover table-dark">      

12. 使用.table-sm 實作緊縮型表格，反轉色調依然支援；

<table class="table table-sm">      

13. 使用.table-success 等語義化實作<tr>或<td>、<th>等效果，反轉色調通用；

<tr class="table-success">
<td class="table-info">男</td>      

PS：.table-*中的*包含：active、primary、secondary、danger、

warning、info、light、dark。

14. 使用.table-responsive 實作溢出時出現底部滾動條；

<table class="table table-responsive">      

<table class="table table-responsive-sm">