我需要一个简单的解决方案。我知道这和其他一些问题类似,比如:
固定标题和固定列的HTML表? 我如何锁定表的第一行和第一列时滚动,可能使用JavaScript和CSS?
但我只需要一个单独的左列被冻结,我更喜欢一个简单的和无脚本的解决方案。
我需要一个简单的解决方案。我知道这和其他一些问题类似,比如:
固定标题和固定列的HTML表? 我如何锁定表的第一行和第一列时滚动,可能使用JavaScript和CSS?
但我只需要一个单独的左列被冻结,我更喜欢一个简单的和无脚本的解决方案。
当前回答
我只是把表中最右边的粘性列变成了粘性。
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;},您将得到所需的结果。
其他回答
如果你在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中使用条件注释。
下面是对最流行答案的另一种修改,但在第一列标签中处理了可变长度的文本: http://jsfiddle.net/ozx56n41/
基本上,我用第二列来创建行高,就像前面提到的。但我的小提琴实际上不像上面提到的那样。
HTML:
<div id="outerdiv">
<div id="innerdiv">
<table>
<tr>
<td class="headcol"><div>This is a long label</div></td>
<td class="hiddenheadcol"><div>This is a long label</div></td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol"><div>Short label</div></td>
<td class="hiddenheadcol"><div>Short label</div></td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
</table>
</div>
</div>
CSS:
body {
font: 16px Calibri;
}
#outerdiv {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
border-top: 1px solid grey;
}
#innerdiv {
overflow-x: scroll;
margin-left: 100px;
overflow-y: visible;
padding-bottom: 1px;
}
table {
border-collapse:separate;
}
td {
margin: 0;
border: 1px solid grey;
border-top-width: 0;
border-left-width: 0px;
padding: 10px;
}
td.headcol {
/* Frozen 1st column */
position: absolute;
left: 0;
top: auto;
border-bottom-width: 1px;
padding: 0;
border-left-width: 1px;
}
td.hiddenheadcol {
/* Hidden 2nd column to create height */
max-width: 0;
visibility: hidden;
padding: 0;
}
td.headcol div {
/* Text container in the 1st column */
width: 100px;
max-width: 100px;
background: lightblue;
padding: 10px;
box-sizing: border-box;
}
td.hiddenheadcol div {
/* Text container in the 2nd column */
width: 100px;
max-width: 100px;
background: red;
padding: 10px;
}
td.long {
background:yellow;
letter-spacing:1em;
}
Eamon Nerbonne,我在你的代码中改变了一些css,现在它更好了(滚动条从第一行开始)
http://jsfiddle.net/At8L8/
我只是加了两行:
.div : padding-left:5em;
.headcol : background-color : #fff;
我只是把表中最右边的粘性列变成了粘性。
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;},您将得到所需的结果。
你可以让第一列的位置: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>