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

Question

我正在尝试在可滚动的fixed中生成table div个字段。

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。