引导表 - 重复的表头答案

【问题标题】：Bootstrap table - Duplicate table header引导表 - 重复的表头
【发布时间】：2022-03-01 10:44:57
【问题描述】：

当我尝试重新制作这个组列示例时：http://issues.wenzhixin.net.cn/bootstrap-table/index.html#options/group-columns.html 从 Bootstrap 表文档中，我得到了错误的结果。标题被复制并显示两次。

我的代码在这里：

TYPE html>
<html>
<head>
    <title>Group Columns</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.css">
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.js"></script>
</head>
<body>
    <div class="container">
        <h1>Group Columns</h1>
        <p>Use <code>rowspan, colspan</code> options to set the group columns header.</p>
        <table id="table" data-toggle="table">
            <thead>
            <tr>
                <th colspan="2">Item Detail</th>
                <th data-field="id" rowspan="2" data-valign="middle">Item ID</th>
            </tr>
            <tr>
                <th data-field="name">Item Name</th>
                <th data-field="price">Item Price</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td  style="border: 1px solid black">1</td>
                <td  style="border: 1px solid black">2</td>
                <td  style="border: 1px solid black">3</td>
            </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

并在下面的JSFiddle http://jsfiddle.net/mwe2ufzg/中显示。

【问题讨论】：

标签： javascript twitter-bootstrap bootstrap-table

【解决方案1】：

尝试更新到 bootstrap-table 版本 1.9.0

【讨论】：

【解决方案2】：

我在这里遇到了同样的问题。我发现它会在 HTML 中生成两个标题。一个用于固定标题，另一个用于 tbody。我通过在正文中隐藏标题来解决它。

var th = $(".fixed-table-body > thread");
th.hide();

【讨论】：