引导表 - 重复的表头

时间:2015-09-24 14:41:28

标签: javascript twitter-bootstrap bootstrap-table

当我尝试重新制作此组列的示例时: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 个答案:

答案 0 :(得分:0)

尝试更新到bootstrap-table version 1.9.0