表格

轻松创建具有不同风格的漂亮的表格。

表格 Class

要应用这个组件,添加 table 类到一个 table 元素。表格的各行将被线条分隔开。

示例

表格说明
表格标题 表格标题 表格标题
表格脚注 表格脚注 表格脚注
表格数据 表格数据 表格数据
表格数据 表格数据 表格数据

代码

<table class="table">
    <caption>表格说明</caption>
    <thead>
        <tr>
            <th>表格标题</th>
            <th>表格标题</th>
            <th>表格标题</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>表格脚注</td>
            <td>表格脚注</td>
            <td>表格脚注</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>表格数据</td>
            <td>表格数据</td>
            <td>表格数据</td>
        </tr>
        <tr>
            <td>表格数据</td>
            <td>表格数据</td>
            <td>表格数据</td>
        </tr>
    </tbody>
</table>

压缩表格

添加 table-condensed 类使表格单元格更加紧凑。

示例

表格说明
表格标题 表格标题 表格标题
表格脚注 表格脚注 表格脚注
表格数据 表格数据 表格数据
表格数据 表格数据 表格数据

代码

<table class="table table-condensed">
    ...
</table>

表格边框

示例

表格说明
表格标题 表格标题 表格标题
表格脚注 表格脚注 表格脚注
表格数据 表格数据 表格数据
表格数据 表格数据
表格数据 表格数据 表格数据

代码

<table class="table table-bordered">
    ...
</table>

表格条纹

示例

表格说明
表格标题 表格标题 表格标题
表格脚注 表格脚注 表格脚注
表格数据 表格数据 表格数据
表格数据 表格数据 表格数据
表格数据 表格数据 表格数据

代码

<table class="table table-striped">
    ...
</table>

表格悬停

示例

表格说明
表格标题 表格标题 表格标题
表格脚注 表格脚注 表格脚注
表格数据 表格数据 表格数据
表格数据 表格数据 表格数据
表格数据 表格数据 表格数据

代码

<table class="table table-hover">
    ...
</table>

表格状态

示例

表格说明
表格标题 表格标题 表格标题
表格脚注 表格脚注 表格脚注
表格数据 表格数据 表格数据
表格数据 表格数据 表格数据
表格数据 表格数据 表格数据
表格数据 表格数据 表格数据
表格数据 表格数据 表格数据

代码

<table class="table">
    ...
    <tr class="active">
        ...
    </tr>
    <tr class="info">
        ...
    </tr>
    <tr class="warning">
        ...
    </tr>
    <tr class="danger">
        ...
    </tr>
    ...
</table>

组合样式

示例

表格说明
表格标题 表格标题 表格标题
表格脚注 表格脚注 表格脚注
表格数据 表格数据 表格数据
表格数据 表格数据 表格数据
表格数据 表格数据 表格数据
表格数据 表格数据 表格数据
表格数据 表格数据 表格数据

代码

<table class="table table-bordered table-hover">
    ...
</table>

响应式表格

如果你的表格恰好比它的容器元素宽了一些或者最终在某个特定的视口宽度中显得太大,只需要用带有 srollable 类的 <div> 元素将其包裹。当内部的元素比这个容器本身宽的时候,将会创建一个水平的滚动条。

示例

表格标题 表格标题 表格标题 表格标题 表格标题 表格标题 表格标题 表格标题 表格标题 表格标题 表格标题 表格标题 表格标题 表格标题 表格标题 表格标题
表格脚注 表格脚注 表格脚注 表格脚注 表格脚注 表格脚注 表格脚注 表格脚注 表格脚注 表格脚注 表格脚注 表格脚注 表格脚注 表格脚注 表格脚注 表格脚注
表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据
表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据
表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据