Eamon Nerbonne，我在你的代码中改变了一些css，现在它更好了(滚动条从第一行开始)

http://jsfiddle.net/At8L8/

我只是加了两行:

.div : padding-left:5em;
.headcol : background-color : #fff;

你可以使用粘性位置。 下面是一个示例代码。这是HTML/CSS解决方案。不需要js。

.view { margin: auto; width: 600px; } .wrapper { position: relative; overflow: auto; border: 1px solid black; white-space: nowrap; } .sticky-col { position: -webkit-sticky; position: sticky; background-color: white; } .first-col { width: 100px; min-width: 100px; max-width: 100px; left: 0px; } .second-col { width: 150px; min-width: 150px; max-width: 150px; left: 100px; } <div class="view"> <div class="wrapper"> <table class="table"> <thead> <tr> <th class="sticky-col first-col">Number</th> <th class="sticky-col second-col">First Name</th> <th>Last Name</th> <th>Employer</th> </tr> </thead> <tbody> <tr> <td class="sticky-col first-col">1</td> <td class="sticky-col second-col">Mark</td> <td>Ham</td> <td>Micro</td> </tr> <tr> <td class="sticky-col first-col">2</td> <td class="sticky-col second-col">Jacob</td> <td>Smith</td> <td>Adob Adob Adob AdobAdob Adob Adob Adob Adob</td> </tr> <tr> <td class="sticky-col first-col">3</td> <td class="sticky-col second-col">Larry</td> <td>Wen</td> <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td> </tr> </tbody> </table> </div> </div>

codeply代码:https://www.codeply.com/p/oZ4NjpvwbO

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

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

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

如果您想要一个只有列水平滚动的表，您可以定位:绝对第一列(并显式指定其宽度)，然后将整个表包装在一个overflow-x: scroll块中。但是，不要在IE7中尝试这个…

相关的HTML和CSS:

table { border-collapse: separate; border-spacing: 0; border-top: 1px solid grey; } td, th { margin: 0; border: 1px solid grey; white-space: nowrap; border-top-width: 0px; } div { width: 500px; overflow-x: scroll; margin-left: 5em; overflow-y: visible; padding: 0; } .headcol { position: absolute; width: 5em; left: 0; top: auto; border-top-width: 1px; /*only relevant for first row*/ margin-top: -1px; /*compensate for top border*/ } .headcol:before { content: 'Row '; } .long { background: yellow; letter-spacing: 1em; } <div> <table> <tr> <th class="headcol">1</th> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> </tr> <tr> <th class="headcol">2</th> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> </tr> <tr> <th class="headcol">3</th> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> </tr> <tr> <th class="headcol">4</th> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> </tr> <tr> <th class="headcol">5</th> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> </tr> <tr> <th class="headcol">6</th> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> </tr> </table> </div>

小提琴

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

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

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

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

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