如何在Bootstrap中创建含两行表头的双行斑马纹表格？

一、实现双行表头的斑马纹表格 #

Bootstrap 4原生不支持双行表头的斑马纹，但可以通过自定义CSS扩展实现，同时适配移动端：

• 按标准结构构建表格：使用table基础类，添加table-responsive实现移动端横向滚动；<thead>内包含两行<tr>作为双表头
• 自定义CSS匹配Bootstrap主题色调，给表头的奇偶行设置背景色

示例代码（可直接在Blazor中使用）：

<div class="table-responsive">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th colspan="2">主分类1</th>
                <th colspan="2">主分类2</th>
            </tr>
            <tr>
                <th>子项1</th>
                <th>子项2</th>
                <th>子项3</th>
                <th>子项4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
            </tr>
            <tr>
                <td>数据5</td>
                <td>数据6</td>
                <td>数据7</td>
                <td>数据8</td>
            </tr>
        </tbody>
    </table>
</div>

<style>
/* 双表头斑马纹，匹配Bootstrap主题 */
thead tr:nth-child(odd) {
    background-color: rgba(0,0,0,.05); /* 和原生table-striped奇数行背景一致 */
}
thead tr:nth-child(even) {
    background-color: #ffffff;
}
</style>

二、手动设置类匹配Bootstrap斑马纹样式 #

如果无法使用自定义CSS，直接给元素添加以下类即可：

• 表头奇数行：加bg-light类，对应Bootstrap表格条纹的浅色背景
• 表头偶数行：无需额外类，默认白色背景即可
• 内容行斑马纹：给表格添加table-striped类，原生会自动给奇数行设置rgba(0,0,0,.05)背景
• 字体颜色：表头默认继承text-dark（原生表头字体色），如需调整可使用text-primary/text-muted等主题类

Blazor Server端适配注意 #

• 自定义CSS建议放到wwwroot/css/site.css中，确保全局生效
• 动态生成表头行时，可通过@foreach循环结合索引判断，给对应行添加背景类

内容的提问来源于stack exchange，提问作者David Thielen