概览

• 规范
• 基本表格
• 超宽表格
• 卡片中的超宽表格

---

规范

基本表格

示例：

<table id="table1" class="table table-bordered" style="">
    <thead>
        <tr>
            <th>
                表头示例
            </th>
            <th>
                <a href="#">带有链接的表头</a>
            </th>
            <th>
                表头示例
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <a href="#">
                    这是一项内容
                </a>
            </td>
            <td>这是一项内容</td>
            <td>这是一项内容</td>
        </tr>
        <tr>
            <td>
                这是一项内容
            </td>
            <td>这是一项内容</td>
            <td>这是一项内容</td>
        </tr>
    </tbody>
</table>

表格相关控制类

• .table-bordered：带边框的表格
• .table-striped：条纹状表格
• .table-hover：鼠标悬停
• .table-sm：紧缩的表格

超宽表格

使用 min-width 为表格设定固定宽度

示例：

<div class="table-responsive">
    <table id="table2" class="table table-bordered border m-0"> style="min-width: 2000px;"
        <thead>
            <tr>
                <th>

注意：

• 在 Safari 中通过设定 width 无法呈现超宽表格。
• 为保证兼容性，请使用 min-width 设定超宽表格。

卡片中的超宽表格

示例：