我需要一个简单的解决方案。我知道这和其他一些问题类似，比如:
固定标题和固定列的HTML表? 我如何锁定表的第一行和第一列时滚动，可能使用JavaScript和CSS?
但我只需要一个单独的左列被冻结，我更喜欢一个简单的和无脚本的解决方案。
当前回答
我改进了断路器的例子，原来的例子代码将动摇固定列，因为表有填充，我使用边界崩溃:崩溃禁用它
<!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>
其他回答
.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
Eamon Nerbonne，我在你的代码中改变了一些css，现在它更好了(滚动条从第一行开始)
http://jsfiddle.net/At8L8/
我只是加了两行:
.div : padding-left:5em;
.headcol : background-color : #fff;
你可以让第一列的位置:sticky;z - index: 9。 它将使列/行保持在其当前位置。 请在https://codepen.io/swastikmishra/pen/zYYdKBQ处检查我的示例代码
HTML例子
table { text-align: center; } .table-container { width: 500px; height: 300px; overflow: scroll; } table th, table td { white-space: nowrap; padding: 10px 20px; font-family: Arial; } table tr th:first-child, table td:first-child { position: sticky; width: 100px; left: 0; z-index: 10; background: #fff; } table tr th:first-child { z-index: 11; } table tr th { position: sticky; top: 0; z-index: 9; background: #fff; } <div class="table-container"> <table> <tr> <th>Hello World</th> <th>Hello World</th> <th>Hello World</th> <th>Hello World</th> <th>Hello World</th> <th>Hello World</th> <th>Hello World</th> </tr> <tr> <td>H11</td> <td>H12</td> <td>H13</td> <td>H14</td> <td>H15</td> <td>H16</td> <td>H17</td> </tr> <tr> <td>H21</td> <td>H22</td> <td>H23</td> <td>H24</td> <td>H25</td> <td>H26</td> <td>H27</td> </tr> <tr> <td>H31</td> <td>H32</td> <td>H33</td> <td>H34</td> <td>H35</td> <td>H36</td> <td>H37</td> </tr> <tr> <td>H41</td> <td>H42</td> <td>H44</td> <td>H44</td> <td>H45</td> <td>H46</td> <td>H47</td> </tr> <tr> <td>H51</td> <td>H52</td> <td>H54</td> <td>H54</td> <td>H55</td> <td>H56</td> <td>H57</td> </tr> <tr> <td>H61</td> <td>H62</td> <td>H64</td> <td>H64</td> <td>H65</td> <td>H66</td> <td>H67</td> </tr> <tr> <td>H71</td> <td>H72</td> <td>H74</td> <td>H74</td> <td>H75</td> <td>H76</td> <td>H77</td> </tr> <tr> <td>H81</td> <td>H82</td> <td>H84</td> <td>H84</td> <td>H85</td> <td>H86</td> <td>H87</td> </tr> </table> </div>
在左列宽度固定的情况下，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>
如果你不想过多地触碰你现在的桌子，你可以在桌子前面做一个假的固定列。
这个例子展示了一种不使用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>
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- jQuery表格排序
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
