我需要一个简单的解决方案。我知道这和其他一些问题类似，比如:
固定标题和固定列的HTML表? 我如何锁定表的第一行和第一列时滚动，可能使用JavaScript和CSS?
但我只需要一个单独的左列被冻结，我更喜欢一个简单的和无脚本的解决方案。
当前回答
在HTML5中，你可以使用CSS style.transform。 但是，我建议你“在页面之间滑动”关闭，如果你在Mac上实现。
查看样本codePen
let l = 0; let t = 0; const MouseWheelHandler = (e) => { // vertical scroll if (e.deltaX == -0) { // t = t - e.deltaY // horizonal scroll } else if (e.deltaY == -0) { l = l - e.deltaX if (l >= 0) { l = 0; document.getElementById("gantt_task").style.transform = "translateX(1px)" document.getElementById("gantt_task_header").style.transform = "translateX(1px)" return false } document.getElementById("gantt_task").style.transform = "translateX(" + l.toString() + "px)" document.getElementById("gantt_task_header").style.transform = "translateX(" + l.toString() + "px)" } return false; } window.addEventListener("wheel", MouseWheelHandler, false); .row { border-bottom: 1px solid #979A9A } #gantt_grid_header { height: 30px; width: 100px; position: fixed; z-index: 3; top: 0px; left: 0px; border: 1px solid #cecece; background-color: #F08080; } #gantt_task_header { height: 30px; width: 400px; position: fixed; z-index: 2; top: 0px; left: 100px; border: 1px solid #cecece; background-color: #FFC300; } #gantt_grid { width: 100px; height: 400px; position: absolute; left: 0px; top: 0px; z-index: 1; border: 1px solid #cecece; background-color: #DAF7A6; } #gantt_task { width: 400px; height: 400px; position: absolute; left: 100px; top: 0px; border: 1px solid #cecece; background-color: #FF5733; } <html> <div id="gantt_grid_header"> HEADER </div> <div id="gantt_grid"> <div class="row">V Scroll OK</div> <div class="row">V Scroll OK</div> <div class="row">V Scroll OK</div> <div class="row">V Scroll OK</div> <div class="row">V Scroll OK</div> <div class="row">V Scroll OK</div> <div class="row">V Scroll OK</div> <div class="row">V Scroll OK</div> <div class="row">V Scroll OK</div> </div> <div id="gantt_task_header"> DATA HEADER </div> <div id="gantt_task"> <div class="row">Vertical,Horizenal Scroll OK</div> <div class="row">Vertical,Horizenal Scroll OK</div> <div class="row">Vertical,Horizenal Scroll OK</div> <div class="row">Vertical,Horizenal Scroll OK</div> <div class="row">Vertical,Horizenal Scroll OK</div> <div class="row">Vertical,Horizenal Scroll OK</div> <div class="row">Vertical,Horizenal Scroll OK</div> <div class="row">Vertical,Horizenal Scroll OK</div> <div class="row">Vertical,Horizenal Scroll OK</div> </div> </html>
其他回答
样式左列的位置:固定。(您可能希望使用top和left样式来控制它发生的确切位置。)
Eamon Nerbonne，我在你的代码中改变了一些css，现在它更好了(滚动条从第一行开始)
http://jsfiddle.net/At8L8/
我只是加了两行:
.div : padding-left:5em;
.headcol : background-color : #fff;
当我在我的mac上测试之前的所有答案时，Opera都有bug。 如果在表中滚动，经过第一个不固定的列后，固定的列就会消失。我继续编写下面的代码。它适用于我在本地安装的所有浏览器。我不知道ie是怎么处理的。
请记住，如果您打算跳过一个表中的行而不是另一个表中的行，或者更改行的高度，您可能需要调整这段代码。
<table class = "fixedColumns">
<tr><td> row 1 </td></tr>
<tr><td> row 2 </td></tr>
</table>
<table class = "scrollableTable">
<tr><td> col 1 </td> <td> col 2 </td><td> col 3 </td><td> col 4 </td></tr>
<tr><td> col 1 </td> <td> col 2 </td><td> col 3 </td><td> col 4 </td></tr>
</table>
<style type = "text/css" >
.fixedColumns
{
vertical-align:top;
display: inline-block;
}
.scrollableTable
{
display: inline-block;
width:50px;
white-space: nowrap;
overflow-x: scroll;
}
</style>
如果你不想过多地触碰你现在的桌子，你可以在桌子前面做一个假的固定列。
这个例子展示了一种不使用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>
如果你在webdeveloper的地狱里，需要让它在IE6上工作，下面是我使用的示例代码:
<html>
<head>
<style type="text/css">
.fixme {
position: relative;
left: expression( ( 20 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
background-color: #FFFFFF;
}
</style>
</head>
<body>
<table width="1500px" border="2">
<tr>
<td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet</td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
</tr>
<tr>
<td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
</tr>
<tr>
<td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
</tr>
<tr>
<td class="fixme" style="width: 200px;">loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
<td>loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet </td>
</tr>
</table>
</body>
</html>
这可能只适用于IE6，所以在CSS中使用条件注释。
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- jQuery表格排序
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
