Question

我正在尝试使用Bootstrap创建一个具有固定标题和可滚动内容的表。我已经通过了很多示例，但它们似乎都没有完全符合我的代码。列对齐缺失或内容本身没有滚动条滚动。

资料来源：我从bootstrap code to fix table header采用了以下示例，但它没有任何解决方案可供使用。

要修复的示例链接：https://plnkr.co/edit/5285K3dt5aErj3ZgrzIl?p=preview

HTML code：

    <div class="modal-body">
        <div class="row">
            <div class="" style="width: 80%; margin: 0px auto">
                <table  class="table table-bordered header-fixed" style="border :1px">
                    <thead>
                    <tr style="background-color: #cdd0d6;">
                        <th style="white-space: wrap;text-align: center;">ID</th> 
                        <th style="white-space: nowrap;text-align: center;">Description</th>              
                        <th style="white-space: wrap;text-align: center;">DoorNum</th>
                        <th style="white-space: wrap;text-align: center;">First Name</th>
                        <th style="white-space: wrap;text-align: center;">Num of ordered items</th>
                        <th style="white-space: wrap;text-align: center;">Desc Comments</th>
                    </tr>
                    </thead>
                    <tbody >
                    <tr>
                        <td style="text-align: center;">10</td>
                        <td style="text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
                        <td style="text-align: center; ">798</td>
                        <td style="text-align: center; ">Joe</td>
                        <td style="text-align: center; ">4</td>
                        <td style="text-align: center; ">Order dispatched</td>
                    </tr>
....
</div>

PS：我已经关注了许多链接并尝试实施，但还没有得到解决方案。

Answer 1

简单地

thead {
    position: fixed; 
}

使用引导程序和可滚动内容修复表头

1 个答案: