bootstrap-表格样式_bootstrap 中给th显示边框-优快云博客

本文链接：https://blog.youkuaiyun.com/bertZuo/article/details/85156522

本文详细介绍了各种表格样式的实现方法，包括基础表格、斑马线表格、带边框的表格、鼠标悬停高亮的表格、紧凑型表格和响应式表格。每种样式都通过具体的HTML代码示例进行了解释，展示了如何使用不同的类名来改变表格的颜色和样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不同的样式风格提供了不同的类名，主要包括：

.table：基础表格
.table-striped：斑马线表格
.table-bordered：带边框的表格
.table-hover：鼠标悬停高亮的表格
.table-condensed：紧凑型表格
.table-responsive：响应式表格

tr,不同类名不同颜色

<table class="table table-bordered">
    <thead>
        <tr><th>不同类名不同颜色</th></tr>
    </thead>
    <tbody>
        <tr class="active"><td>表示当前活动信息</td></tr>
        <tr class="success"><td>表示成功会正确的行为</td></tr>
        <tr class="info"><td>表示中立的信息或行为</td></tr>
        <tr class="warning"><td>表示警告,需要特别注意</td></tr>
        <tr class="danger"><td>表示危险,可能犯错的行为</td></tr>
    </tbody>
</table>

鼠标悬浮高亮的表格

<table class="table table-hover">
    <caption>鼠标悬浮高亮的表格</caption>
    <thead>
        <tr><th>不同类名不同颜色</th></tr>
    </thead>
    <tbody>
        <tr class="active"><td>表示当前活动信息</td></tr>
        <tr class="success"><td>表示成功会正确的行为</td></tr>
        <tr class="info"><td>表示中立的信息或行为</td></tr>
        <tr class="warning"><td>表示警告,需要特别注意</td></tr>
        <tr class="danger"><td>表示危险,可能犯错的行为</td></tr>
    </tbody>
</table>

基础表格

给表格设置了margin-bottom:20px以及设置单元内距，在thead底部设置了一个2px的浅灰实线，每个单元格顶部设置了一个1px的浅灰实线。

<table class="table">
    <caption>基础表格</caption>
    <thead>
        <tr>
            <th>name</th>
            <th>age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tony</td>
            <td>18</td>
        </tr>
        <tr>
            <td>Tom</td>
            <td>20</td>
        </tr>
    </tbody>
</table>

斑马线表格

<table class="table table-striped">
    <caption>斑马线表格</caption>
    <thead>
        <tr>
            <th><span class="glyphicon glyphicon-user"></span></th>
            <th>age</th>
            <th>sex</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tony</td>
            <td>18</td>
            <td>boy</td>
        </tr>
        <tr>
            <td>Tom</td>
            <td>20</td>
            <td>boy</td>
        </tr>
        <tr>
            <td>sali</td>
            <td>16</td>
            <td>girl</td>
        </tr>
    </tbody>
</table>

带1px边框的表格

<table class="table table-bordered">
    <caption>边框表格</caption>
    <thead>
        <tr>
            <th>name</th>
            <th>age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tony</td>
            <td>18</td>
        </tr>
        <tr>
            <td>Tom</td>
            <td>20</td>
        </tr>
    </tbody>
</table>

紧凑型表格

这与基础表格差别不大，因为只是将单元格的内距由8px调至5px

<table class="table table-condensed">
    <caption>紧凑型表格</caption>
    <thead>
        <tr>
            <th>name</th>
            <th>age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tony</td>
            <td>18</td>
        </tr>
        <tr>
            <td>Tom</td>
            <td>20</td>
        </tr>
    </tbody>
</table>

响应式表格

<table class="table table-responsive">
    <caption>响应式表格</caption>
    <thead>
        <tr>
            <th>name</th>
            <th>age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tony</td>
            <td>18</td>
        </tr>
        <tr>
            <td>Tom</td>
            <td>20</td>
        </tr>
    </tbody>
</table>