这是一个有趣的jQuery插件，可以创建固定的标题和/或列。 在演示页面上将固定列切换为true，以查看其实际操作。

当我在我的mac上测试之前的所有答案时，Opera都有bug。 如果在表中滚动，经过第一个不固定的列后，固定的列就会消失。我继续编写下面的代码。它适用于我在本地安装的所有浏览器。我不知道ie是怎么处理的。

请记住，如果您打算跳过一个表中的行而不是另一个表中的行，或者更改行的高度，您可能需要调整这段代码。

<table class = "fixedColumns">
    <tr><td> row 1 </td></tr>
    <tr><td> row 2 </td></tr>
</table>
<table class = "scrollableTable">
    <tr><td> col 1 </td> <td> col 2 </td><td> col 3 </td><td> col 4 </td></tr>
    <tr><td> col 1 </td> <td> col 2 </td><td> col 3 </td><td> col 4 </td></tr>
</table>

<style type = "text/css" >
    .fixedColumns
    {
        vertical-align:top;
        display: inline-block;
    }
    .scrollableTable
    {
        display: inline-block;
        width:50px;
        white-space: nowrap;
        overflow-x: scroll;
    }
</style>

样式左列的位置:固定。(您可能希望使用top和left样式来控制它发生的确切位置。)

不需要添加任何插件，CSS可以做这个工作!!

其思想是使每列中所有第一个单元格的位置是绝对的，宽度是固定的。例:

max-width: 125px;
min-width: 125px;
position: absolute;

这将在第一列下面隐藏一些列的某些部分，因此添加一个空的第二列(添加第二个空td)，其宽度与第一列相同。

我进行了测试，在Chrome和Firefox中都可以使用。

如果您正在开发一些更复杂的东西，并且希望多个列固定/固定在左边，您可能需要这样的东西。

.wrapper { overflow-x: scroll; } td { min-width: 50px; } .fixed { position: absolute; background: #aaa; } <div class="content" style="width: 400px"> <div class="wrapper" style="margin-left: 100px"> <table> <thead> <tr> <th class="fixed" style="left: 0px">aaa</th> <th class="fixed" style="left: 50px">aaa2</th> <th>a</th> <th>b</th> <th>c</th> <th>d</th> <th>e</th> <th>f</th> <th>a</th> <th>b</th> <th>c</th> <th>d</th> <th>e</th> <th>f</th> <th>a</th> <th>b</th> <th>c</th> <th>d</th> <th>e</th> <th>f</th> <th>a</th> <th>b</th> <th>c</th> <th>d</th> <th>e</th> <th>f</th> </tr> </thead> <tbody> <tr> <td class="fixed" style="left: 0px">aaa</td> <td class="fixed" style="left: 50px">aaa2</td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr> <tr> <td class="fixed" style="left: 0">bbb</td> <td class="fixed" style="left: 50px">bbb2</td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr> </tbody> </table> </div> </div>

或者，用预先确定的大小(例如，通过高度:20em)样式tbody，并使用overflow-y:scroll;

然后，您可以有一个巨大的tbody，它将独立于页面的其余部分滚动。