表格 thead 和第一个 tbody 列保持固定在可滚动的 div 中

Question

我正在尝试在可滚动的div 中创建fixed table 字段。

HTML 部分：

<div class="scroll">
    <table>
        <thead>
            <tr>
                <td>Title #1</td>
                <td class="second">Title #2</td>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Name #1</td>
                <td>Description</td>
            </tr>
            <tr>
                <td>Name #2</td>
                <td>Description</td>
            </tr>
        </tbody>
    </table>
</div>

CSS 部分：

table {

    width: auto;
}

table > thead > tr > td {

    min-width: 100px;
    max-width: 100px;

    padding: 10px 20px;
    border-right: 1px solid #666666;
    background-color: #cccccc;
}

table > thead > tr > td.second {

    min-width: 300px;
    max-width: 300px;
}

table > tbody > tr > td {

    padding: 30px 0;
}

div.scroll {

    max-width: 400px;
    max-height: 200px;
    overflow: auto;
}

其中div.scroll 将max-height 和max-width 设置为小于table 的大小。请参阅fiddle example。

实例：

垂直滚动时红色部分应保持在top，水平滚动时应移动，垂直滚动时应移动蓝色部分，水平滚动时应保持left。

问题：

有什么简单的方法吗？或者这样做的最佳方法是什么..？

Answer 1

http://jsfiddle.net/hmvxf/1/ 请检查您的代码更新

做了一些改动

<div class="fixed">
     <table>
        <thead>
            <tr>
                <td>
                    Title #1
                </td>
                <td class="second">
                    Title #2
                </td>
            </tr>
        </thead>
    </table>
</div>

Answer 2

jQuery 我的问题的解决方案：STICKY TABLE HEADERS & COLUMNS。