html - 带有非滚动标题的可滚动表

Question

我正在使用 jade 开发一个有表格的网页，我已经让它可以滚动了。如何使标题不随表格内容滚动？

div(class='scrollit')  
    table.table.table-striped-table-bordered(id='table1')
      tr
        td Header 1
        td Header 2
        td Header 3
      - for(var rule in obj)
        tr
          td 
            input(type='checkbox')
          td 
            input(type='checkbox')
          td
            input(type='checkbox')

CSS:

.scrollit {
    overflow:scroll;
    height:500px;
    width:100%;
}

Answer 1

1 - 示例

这是您要找的吗？

http://jsfiddle.net/jrLw4/38/

---

2 - 解释

基本上这里所做的是一个表，它有滚动内容，另一个表代表该内容的标题。

您实际上无法通过仅使用一个表格来实现这种效果，因为表格元素都是相连的。为了使标题的固定效果正常工作，您需要将这些元素分开。

因此，在对不同的 table 元素中的两个元素(标题和内容)完成所需的操作后，您只需将其包装在 div(或任何其他 HTML 容器中)元素)并在该包装元素中使用典型的 position: fixed 技巧。

---

3 - 代码

HTML

<div id="table-wrapper">
    <table id="table-head">
        <thead>
            <tr>
                <td>One</td>
                <td>Two</td>
                <td>Three</td>
            </tr>
        </thead>
    </table>
    <div id="table-wrapper-scroll">
        <table>
            <tbody>
                <tr>
                    <td>This</td>
                    <td>is a</td>
                    <td>row</td>
                </tr>

[[lots of content]]

                <tr>
                    <td>This</td>
                    <td>is a</td>
                    <td>row</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

#table-wrapper {
    width: 300px;
    height: 200px;
    background: #f3f3f3;
    position: relative;
    margin: 0 auto;
    padding-top: 30px;
}
#table-wrapper-scroll{
    height: 100%;
    overflow: scroll;
}
#table-head {
    width: 100%;
    height: 25px;
    color: #f00;
    background: #fff;
    border-bottom: 1px solid #f00;
    padding-bottom: 5px;
    position: absolute;
    top: 0;
}
#table-wrapper-scroll > table{
    width: 100%;
}