Bootstrap4.x学习笔记【六】

　　　　　　　表格样式

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