我需要一个简单的解决方案。我知道这和其他一些问题类似，比如:
固定标题和固定列的HTML表? 我如何锁定表的第一行和第一列时滚动，可能使用JavaScript和CSS?
但我只需要一个单独的左列被冻结，我更喜欢一个简单的和无脚本的解决方案。
当前回答
你可以让第一列的位置: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>
其他回答
当我在我的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>
你可以让第一列的位置: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>
有点晚了，但我确实在为自己尝试解决方案时遇到了这个线程。假设您现在使用的是现代浏览器，我提出了一个使用CSS calc()来帮助保证满足宽度的解决方案。
.table-fixed-left table, .table-fixed-right table { border-collapse: collapse; } .table-fixed-right td, .table-fixed-right th, .table-fixed-left td, .table-fixed-left th { border: 1px solid #ddd; padding: 5px 5px; } .table-fixed-left { width: 120px; float: left; position: fixed; overflow-x: scroll; white-space: nowrap; text-align: left; border: 1px solid #ddd; z-index: 2; } .table-fixed-right { width: calc(100% - 145px); right: 15px; position: fixed; overflow-x: scroll; border: 1px solid #ddd; white-space: nowrap; } .table-fixed-right td, .table-fixed-right th { padding: 5px 10px; } <div class="table-fixed-left"> <table> <tr> <th>Normal Header</th> </tr> <tr> <th>Header with extra line <br/> </th> </tr> <tr> <th>Normal Header</th> </tr> <tr> <th>Normal with extra line <br/> </th> </tr> <tr> <th>Normal Header</th> </tr> <tr> <th>Normal Header</th> </tr> </table> </div> <div class="table-fixed-right"> <table> <tr> <th>Header</th> <th>Another header</th> <th>Header</th> <th>Header really really really really long</th> </tr> <tr> <td>Info Long</td> <td>Info <br/>with second line</td> <td>Info <br/>with second line</td> <td>Info Long</td> </tr> <tr> <td>Info Long</td> <td>Info Long</td> <td>Info Long</td> <td>Info Long</td> </tr> <tr> <td>Info <br/>with second line</td> <td>Info <br/>with second line</td> <td>Info <br/>with second line</td> <td>Info</td> </tr> <tr> <td>Info</td> <td>Info</td> <td>Info</td> <td>Info</td> </tr> <tr> <td>Info</td> <td>Info</td> <td>Info</td> <td>Info</td> </tr> </table> </div>
希望这能帮助到一些人!
我把埃尔蒙·纳邦的答案编辑了一下，让它与填满整个宽度的表格一起工作。
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>
固定列的宽度仍然需要一个设定值。
样式左列的位置:固定。(您可能希望使用top和left样式来控制它发生的确切位置。)
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- jQuery表格排序
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
