表格樣式

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">
        <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>

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

<thead class="thead-light">

4. 使用.table-striped 實現資料表的條紋狀顯示，條紋狀顯示也適用於反轉色調上

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

5.預設情況下，邊框是不完全的，使用.table-bordered 設定表格邊框；表格邊框也可以作用域反轉色調上

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

6.使用.table-borderless 設定無邊框；無邊框效果也可以作用於反轉色調上

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

7.使用.table-hover 實現一行懸停效果，行懸停效果也可以作用於反轉色調上

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

8.使用.table-sm 實現緊縮型表格

<table class="table table-sm">

9.使用.table-responsive 實現溢位時出現底部滾動條；使用.table-responsive-sm 實現只有小於 768px 溢位時出現底部滾動條

<table class="table table-responsive">