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

 

15. 使用.table-responsive-sm 实现只有小于 768px 溢出时出现底部滚动条；

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