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

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

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

对我来说，这是唯一一个完美的(感谢保罗·奥布莱恩!): https://codepen.io/paulobrien/pen/gWoVzN

以下是片段:

// requires jquery library jQuery(document).ready(function() { jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone'); }); .table-scroll { position:relative; max-width:600px; margin:auto; overflow:hidden; border:1px solid #000; } .table-wrap { width:100%; overflow:auto; } .table-scroll table { width:100%; margin:auto; border-collapse:separate; border-spacing:0; } .table-scroll th, .table-scroll td { padding:5px 10px; border:1px solid #000; background:#fff; white-space:nowrap; vertical-align:top; } .table-scroll thead, .table-scroll tfoot { background:#f9f9f9; } .clone { position:absolute; top:0; left:0; pointer-events:none; } .clone th, .clone td { visibility:hidden } .clone td, .clone th { border-color:transparent } .clone tbody th { visibility:visible; color:red; } .clone .fixed-side { border:1px solid #000; background:#eee; visibility:visible; } .clone thead, .clone tfoot{background:transparent;} <div id="table-scroll" class="table-scroll"> <div class="table-wrap"> <table class="main-table"> <thead> <tr> <th class="fixed-side" scope="col">&nbsp;</th> <th scope="col">Header 2</th> <th scope="col">Header 3</th> <th scope="col">Header 4</th> <th scope="col">Header 5</th> <th scope="col">Header 6</th> <th scope="col">Header 7</th> <th scope="col">Header 8</th> </tr> </thead> <tbody> <tr> <th class="fixed-side">Left Column</th> <td>Cell content<br> test</td> <td><a href="#">Cell content longer</a></td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> <tr> <th class="fixed-side">Left Column</th> <td>Cell content</td> <td>Cell content longer</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> <td>Cell content</td> </tr> </tbody> <tfoot> <tr> <th class="fixed-side">&nbsp;</th> <td>Footer 2</td> <td>Footer 3</td> <td>Footer 4</td> <td>Footer 5</td> <td>Footer 6</td> <td>Footer 7</td> <td>Footer 8</td> </tr> </tfoot> </table> </div> </div> <p>See <a href="https://codepen.io/paulobrien/pen/LBrMxa" target="blank">position Sticky version </a>with no JS</p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>

.div1 {
    width: 600px;
    height: 400px;
    overflow: scroll;
    border: 1px solid #777777;
}

.div1 table {
    border-spacing: 0;
}

.div1 th {
    border-left: none;
    border-right: 1px solid #bbbbbb;
    padding: 5px;
    width: 80px;
    min-width: 80px;
    position: sticky;
    top: 0;
    background: #727272;
    color: #e0e0e0;
    font-weight: normal;
}

.div1 td {
    border-left: none;
    border-right: 1px solid #bbbbbb;
    border-bottom: 1px solid #bbbbbb;
    padding: 5px;
    width: 80px;
    min-width: 80px;
}

.div1 th:nth-child(1),
.div1 td:nth-child(1) {
    position: sticky;
    left: 0;
    width: 150px;
    min-width: 150px;
}

.div1 th:nth-child(2),
.div1 td:nth-child(2) {
    position: sticky;
    /* 1st cell left/right padding + 1st cell width + 1st cell left/right border width */
    /* 0 + 5 + 150 + 5 + 1 */
    left: 161px;
    width: 50px;
    min-width: 50px;
}

.div1 td:nth-child(1),
.div1 td:nth-child(2) {
    background: #ffebb5;
}

.div1 th:nth-child(1),
.div1 th:nth-child(2) {
    z-index: 2;
}

HTML,

<div class="div1">
    <table>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
            <th>Column 5</th>
            <th>Column 6</th>
        </tr>
        <tr>
            <td>Row Data 1</td>
            <td>Row Data 2</td>
            <td>Row Data 3</td>
            <td>Row Data 4</td>
            <td>Row Data 5</td>
            <td>Row Data 6</td>
        </tr>
        <tr>
            <td>Row Data 1</td>
            <td>Row Data 2</td>
            <td>Row Data 3</td>
            <td>Row Data 4</td>
            <td>Row Data 5</td>
            <td>Row Data 6</td>
        </tr>
    </table>
</div>

Youtube视频演练:https://www.youtube.com/watch?v=_dpSEjaKqSE

例1:固定宽度和高度

https://adriancs.com/demo/freeze_table_column_row.html

示例2:响应宽度和高度(通过使用viewport进行调整)

https://adriancs.com/html-css-js/298/html-table-freeze-row-and-column-with-css/

完整的教程解释:

https://adriancs.com/demo/freeze_table_column_row_responsive_viewport.html

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

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

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

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

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

如果你不想过多地触碰你现在的桌子，你可以在桌子前面做一个假的固定列。

这个例子展示了一种不使用JS的方法

table { border-collapse: collapse; border-spacing: 0; border: 1px solid #ddd; min-width: 600px; } .labels { display:flex; flex-direction: column } .overflow { overflow-x: scroll; min width: 400px; flex: 1; } .label { display: flex; align-items: center; white-space:nowrap; padding: 10px; flex: 1; border-bottom: 1px solid #ddd; border-right: 2px solid #ddd; } .label:last-of-type { overflow-x: scroll; border-bottom: 0; } td { border: 1px solid #ddd; padding: 10px; } .flex { display:flex; max-width: 600px; padding: 0; border: 5px solid #ddd; } <div class="flex"> <div class="labels"> <span class="label">Label 1</span> <span class="label">Lorem ipsum dolor sit amet.</span> <span class="label">Lorem ipsum dolor.</span> </div> <div class="overflow"> <table> <tr> <td class="long">Lorem ipsum dolor sit amet consectetur adipisicing</td> <td class="long">Lorem ipsum dolor sit amet consectetur adipisicing</td> </tr> <tr> <td class="long">Lorem ipsum dolor sit amet consectetur adipisicing</td> <td class="long">Lorem ipsum dolor sit amet consectetur adipisicing</td> </tr> <tr> <td class="long">Lorem ipsum dolor sit amet consectetur adipisicing</td> <td class="long">Lorem ipsum dolor sit amet consectetur adipisicing</td> </tr> </table> </div> </div>