jquery - 使第一列固定并在表格中保持可滚动

Question

在我的表格中，如果 td 溢出，我想冻结第一列并使其他列可滚动。

我在jsfiddle中尝试过，但它没有按预期工作。

可以有 100 行。

我需要第一列是固定的，并且具有其他列的部分是可滚动的，但单个 td 将保持固定 - 在此先感谢

Answer 1

虽然并不完美，并且取决于您的用例和生成 HTML 的方式，您可以执行类似的操作。

HTML

<table id="main">
    <tr>
        <td class="first"> what are the possible values?</td>
        <td rowspan="2">
            <div class="rest">
            <table>
                <tr>
                    <td>100</td>
                    <td>200</td>
                    <td>300</td>
                    <td>400</td>
                    <td>500</td>
                    <td>600</td>
                    <td>700</td>
                    <td>800</td>
                    <td>900</td>
                    <td>1000</td>
                    <td>1100</td>
                </tr>                        
                <tr>
                    <td>100</td>
                    <td>200</td>
                    <td>300</td>
                    <td>400</td>
                    <td>500</td>
                    <td>600</td>
                    <td>700</td>
                    <td>800</td>
                    <td>900</td>
                    <td>1000</td>
                    <td>1100</td>
                </tr>                        
                </table>
            </div>
        </td>
    </tr>
    <tr class="first_column">
        <td class="first"> what are the possible values?</td>
    </tr>
</table>​

CSS

table {
    border-collapse: collapse;
}
table#main {
    border-top: 1px solid #DFDFDF;
    margin-bottom: 1em;
    width:400px;
    display: block;
}
table#main .first {
    width:200px;
    white-space: nowrap;
}
table#main .rest {
    overflow: scroll;
    background: silver;
    width:200px;
}
table td.first, table .rest td {
    line-height: 1.5em;
    padding: 0.5em 0.6em;
    text-align: left;
    vertical-align: middle;
    text-align: left;
}

​<strong>PS 我只在 OSX 上的 Safari 6 和 Firefox 12、13 和 14 上测试过这个 ​</p>