表格样式

1.使用.table 给表格设置一个基类，这是表格的基本样式

<table class="table">
        <thead>
            <tr>
                <th>IDth>
                <th>姓名th>
                <th>性别th>
                <th>总成绩th>
            tr>
        thead>
        <tbody>
            <tr>
                <td>1td>
                <td>张三td>
                <td>男td>
                <td>98td>
            tr>
            <tr>
                <td>2td>
                <td>李四td>
                <td>女td>
                <td>94td>
            tr>
            <tr>
                <td>3td>
                <td>王五td>
                <td>男td>
                <td>97td>
            tr>
        tbody>
    table>

2.使用.table-dark 样式，启用颜色反转对比效果

<table class="table table-dark">
        <thead>
            <tr>
                <th>IDth>
                <th>姓名th>
                <th>性别th>
                <th>总成绩th>
            tr>
        thead>
        <tbody>
            <tr>
                <td>1td>
                <td>张三td>
                <td>男td>
                <td>98td>
            tr>
            <tr>
                <td>2td>
                <td>李四td>
                <td>女td>
                <td>94td>
            tr>
            <tr>
                <td>3td>
                <td>王五td>
                <td>男td>
                <td>97td>
            tr>
        tbody>
    table>

3. 在使用.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">