带有非滚动标题的可滚动表格

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%;
}