我需要一个简单的解决方案。我知道这和其他一些问题类似,比如:
固定标题和固定列的HTML表? 我如何锁定表的第一行和第一列时滚动,可能使用JavaScript和CSS?
但我只需要一个单独的左列被冻结,我更喜欢一个简单的和无脚本的解决方案。
我需要一个简单的解决方案。我知道这和其他一些问题类似,比如:
固定标题和固定列的HTML表? 我如何锁定表的第一行和第一列时滚动,可能使用JavaScript和CSS?
但我只需要一个单独的左列被冻结,我更喜欢一个简单的和无脚本的解决方案。
当前回答
//If the table has tbody and thead, make them the relative container in which we can fix td and th as absolute
table tbody {
position: relative;
}
table thead {
position: relative;
}
//Make both the first header and first data cells (First column) absolute so that it sticks to the left
table td:first-of-type {
position: absolute;
}
table th:first-of-type {
position: absolute;
}
//Move Second column according to the width of column 1
table td:nth-of-type(2) {
padding-left: <Width of column 1>;
}
table th:nth-of-type(2) {
padding-left: <Width of column 1>;
}
其他回答
如果你不想过多地触碰你现在的桌子,你可以在桌子前面做一个假的固定列。
这个例子展示了一种不使用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>
这是一个有趣的jQuery插件,可以创建固定的标题和/或列。 在演示页面上将固定列切换为true,以查看其实际操作。
你可以让第一列的位置: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>
在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>
如果您正在开发一些更复杂的东西,并且希望多个列固定/固定在左边,您可能需要这样的东西。
.wrapper { overflow-x: scroll; } td { min-width: 50px; } .fixed { position: absolute; background: #aaa; } <div class="content" style="width: 400px"> <div class="wrapper" style="margin-left: 100px"> <table> <thead> <tr> <th class="fixed" style="left: 0px">aaa</th> <th class="fixed" style="left: 50px">aaa2</th> <th>a</th> <th>b</th> <th>c</th> <th>d</th> <th>e</th> <th>f</th> <th>a</th> <th>b</th> <th>c</th> <th>d</th> <th>e</th> <th>f</th> <th>a</th> <th>b</th> <th>c</th> <th>d</th> <th>e</th> <th>f</th> <th>a</th> <th>b</th> <th>c</th> <th>d</th> <th>e</th> <th>f</th> </tr> </thead> <tbody> <tr> <td class="fixed" style="left: 0px">aaa</td> <td class="fixed" style="left: 50px">aaa2</td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr> <tr> <td class="fixed" style="left: 0">bbb</td> <td class="fixed" style="left: 50px">bbb2</td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr> </tbody> </table> </div> </div>