我需要一个简单的解决方案。我知道这和其他一些问题类似，比如:
固定标题和固定列的HTML表? 我如何锁定表的第一行和第一列时滚动，可能使用JavaScript和CSS?
但我只需要一个单独的左列被冻结，我更喜欢一个简单的和无脚本的解决方案。
当前回答
.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
其他回答
我没有检查这个问题的每个答案，但在分析了大部分答案后，我发现在单元格或头部的多行数据情况下，设计会失败。我使用Javascript来解决这个问题。我希望有人觉得这有帮助。
https://codepen.io/kushagrarora/pen/zeYaoY
var freezeTables = document.getElementsByClassName("freeze-pane"); [].forEach.call(freezeTables, ftable => { var wrapper = document.createElement("div"); wrapper.className = "freeze-pane-wrapper"; var scroll = document.createElement("div"); scroll.className = "freeze-pane-scroll"; wrapper.appendChild(scroll); ftable.parentNode.replaceChild(wrapper, ftable); scroll.appendChild(ftable); var heads = ftable.querySelectorAll("th:first-child"); let maxWidth = 0; [].forEach.call(heads, head => { var w = window .getComputedStyle(head) .getPropertyValue("width") .split("px")[0]; if (Number(w) > Number(maxWidth)) maxWidth = w; }); ftable.parentElement.style.marginLeft = maxWidth + "px"; ftable.parentElement.style.width = "calc(100% - " + maxWidth + "px)"; [].forEach.call(heads, head => { head.style.width = maxWidth + "px"; var restRowHeight = window .getComputedStyle(head.nextElementSibling) .getPropertyValue("height"); var headHeight = window.getComputedStyle(head).getPropertyValue("height"); if (headHeight > restRowHeight) head.nextElementSibling.style.height = headHeight; else head.style.height = restRowHeight; }); }); @import url("https://fonts.googleapis.com/css?family=Open+Sans"); * { font-family: "Open Sans", sans-serif; } .container { width: 400px; height: 90vh; border: 1px solid black; overflow: hidden; } table, th, td { border: 1px solid #eee; } .table { width: 100%; margin-bottom: 1rem; table-layout: fixed; border-collapse: collapse; } .freeze-pane-wrapper { position: relative; } .freeze-pane-scroll { overflow-x: scroll; overflow-y: visible; } .freeze-pane th:first-child { position: absolute; background-color: pink; left: 0; top: auto; max-width: 40%; } <div class="container"> <table class="freeze-pane"> <tbody> <tr> <th> <p>Model</p> </th> <th> <p>Mercedes Benz AMG C43 4dr</p> </th> <th> <p>Audi S4 Premium 4dr</p> </th> <th> <p>BMW 440i 4dr sedan</p> </th> </tr> <tr> <th> <p>Passenger capacity</p> </th> <td> <p>5</p> </td> <td> <p>5</p> </td> <td> <p>5</p> </td> </tr> <tr> <th> <p>Front (Head/Shoulder/Leg) (In.)</p> </th> <td> <p>37.1/55.3/41.7</p> </td> <td> <p>38.9/55.9/41.3</p> </td> <td> <p>39.9/54.8/42.2</p> </td> </tr> <tr> <th> <p>Second (Head/Shoulder/Leg) (In.)</p> </th> <td> <p>37.1/55.5/35.2</p> </td> <td> <p>37.4/54.5/35.7</p> </td> <td> <p>36.9/54.3/33.7</p> </td> </tr> </tbody> </table> </div>
注意:“container”div只是为了演示代码与mobile-view兼容。
.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
我把埃尔蒙·纳邦的答案编辑了一下，让它与填满整个宽度的表格一起工作。
http://jsfiddle.net/DYgD6/6/
<!DOCTYPE html>
<html><head><title>testdoc</title>
<style type="text/css">
body {
font:16px Calibri;
}
table {
border-collapse:separate;
border-top: 3px solid grey;
}
td {
margin:0;
border:3px solid grey;
border-top-width:0px;
white-space:nowrap;
}
#outerdiv {
position: absolute;
top: 0;
left: 0;
right: 5em;
}
#innerdiv {
width: 100%;
overflow-x:scroll;
margin-left: 5em;
overflow-y:visible;
padding-bottom:1px;
}
.headcol {
position:absolute;
width:5em;
left:0;
top:auto;
border-right: 0px none black;
border-top-width:3px;
/*only relevant for first row*/
margin-top:-3px;
/*compensate for top border*/
}
.headcol:before {
content:'Row ';
}
.long {
background:yellow;
letter-spacing:1em;
}
</style></head><body>
<div id="outerdiv">
<div id="innerdiv">
<table>
<tr>
<td class="headcol">1</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">2</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">3</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">4</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">5</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">6</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">7</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">8</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">9</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</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;}，您将得到所需的结果。
这是一个有趣的jQuery插件，可以创建固定的标题和/或列。 在演示页面上将固定列切换为true，以查看其实际操作。
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- jQuery表格排序
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
