我需要一个简单的解决方案。我知道这和其他一些问题类似，比如:
固定标题和固定列的HTML表? 我如何锁定表的第一行和第一列时滚动，可能使用JavaScript和CSS?
但我只需要一个单独的左列被冻结，我更喜欢一个简单的和无脚本的解决方案。
当前回答
对我来说，这是唯一一个完美的(感谢保罗·奥布莱恩!): 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"> </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"> </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>
其他回答
Eamon Nerbonne，我在你的代码中改变了一些css，现在它更好了(滚动条从第一行开始)
http://jsfiddle.net/At8L8/
我只是加了两行:
.div : padding-left:5em;
.headcol : background-color : #fff;
在左列宽度固定的情况下，Eamon Nerbonne提供了最佳解决方案。
在可变宽度左列的情况下，我发现的最佳解决方案是制作两个相同的表，并将一个放在另一个上面。演示:http://jsfiddle.net/xG5QH/6/。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* important styles */
.container {
/* Attach fixed-th-table to this container,
in order to layout fixed-th-table
in the same way as scolled-td-table" */
position: relative;
/* Truncate fixed-th-table */
overflow: hidden;
}
.fixed-th-table-wrapper td,
.fixed-th-table-wrapper th,
.scrolled-td-table-wrapper td,
.scrolled-td-table-wrapper th {
/* Set background to non-transparent color
because two tables are one above another.
*/
background: white;
}
.fixed-th-table-wrapper {
/* Make table out of flow */
position: absolute;
}
.fixed-th-table-wrapper th {
/* Place fixed-th-table th-cells above
scrolled-td-table td-cells.
*/
position: relative;
z-index: 1;
}
.scrolled-td-table-wrapper td {
/* Place scrolled-td-table td-cells
above fixed-th-table.
*/
position: relative;
}
.scrolled-td-table-wrapper {
/* Make horizonal scrollbar if needed */
overflow-x: auto;
}
/* Simulating border-collapse: collapse,
because fixed-th-table borders
are below ".scrolling-td-wrapper table" borders
*/
table {
border-spacing: 0;
}
td, th {
border-style: solid;
border-color: black;
border-width: 1px 1px 0 0;
}
th:first-child {
border-left-width: 1px;
}
tr:last-child td,
tr:last-child th {
border-bottom-width: 1px;
}
/* Unimportant styles */
.container {
width: 250px;
}
td, th {
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="fixed-th-table-wrapper">
<!-- fixed-th-table -->
<table>
<tr>
<th>aaaaaaa</th>
<td>ccccccccccc asdsad asd as</td>
<td>ccccccccccc asdsad asd as</td>
</tr>
<tr>
<th>cccccccc</th>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
</tr>
</table>
</div>
<div class="scrolled-td-table-wrapper">
<!-- scrolled-td-table
- same as fixed-th-table -->
<table>
<tr>
<th>aaaaaaa</th>
<td>ccccccccccc asdsad asd as</td>
<td>ccccccccccc asdsad asd as</td>
</tr>
<tr>
<th>cccccccc</th>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
<td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
</tr>
</table>
</div>
</div>
</body>
</html>
我只是把表中最右边的粘性列变成了粘性。
th:last-of-type {
position: sticky;
right: 0;
width: 120px;
background: #f7f7f7;
}
td:last-of-type {
position: sticky;
right: 0;
background: #f7f7f7;
width: 120px;
}
我相信如果你愿意{position:粘性;Left: 0;}，您将得到所需的结果。
我改进了断路器的例子，原来的例子代码将动摇固定列，因为表有填充，我使用边界崩溃:崩溃禁用它
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--mobile friendly-->
<meta name="viewport" content="width=device-width, user-scalable=yes">
<style>
.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 {
padding: 0;
margin: 0;
left: 0;
}
.second-col {
left: 200px;
}
.col {
width: 200px;
min-width: 200px;
max-width: 200px;
}
</style>
</head>
<body>
<div class="view">
<div class="wrapper">
<table class="table" style="border-collapse: collapse;">
<colgroup>
<col class="col"/>
<col class="col"/>
<col class="col"/>
<col class="col"/>
</colgroup>
<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>
</body>
</html>
这是一个有趣的jQuery插件，可以创建固定的标题和/或列。 在演示页面上将固定列切换为true，以查看其实际操作。
