具有非滚动标题的可滚动表

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