当我尝试重新制作该组列示例时: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/中显示。

最佳答案

尝试更新到引导表版本1.9.0

关于javascript - 引导表-重复的表头,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32764253/

10-09 05:21