我如何创建一个固定/冻结左列和可滚动的主体HTML表?

你可以让第一列的位置: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>

2019-10-29 03:45:58

如果你不想过多地触碰你现在的桌子，你可以在桌子前面做一个假的固定列。

这个例子展示了一种不使用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>

2019-06-26 13:48:16

在左列宽度固定的情况下，Eamon Nerbonne提供了最佳解决方案。

在可变宽度左列的情况下，我发现的最佳解决方案是制作两个相同的表，并将一个放在另一个上面。演示:http://jsfiddle.net/xG5QH/6/。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* important styles */

.container {
   /* Attach fixed-th-table to this container,
      in order to layout fixed-th-table
      in the same way as scolled-td-table" */
   position: relative;

   /* Truncate fixed-th-table */
   overflow: hidden;
}

.fixed-th-table-wrapper td,
.fixed-th-table-wrapper th,
.scrolled-td-table-wrapper td,
.scrolled-td-table-wrapper th {
   /* Set background to non-transparent color
      because two tables are one above another.
    */
   background: white;
}
.fixed-th-table-wrapper {
   /* Make table out of flow */
   position: absolute;
}
.fixed-th-table-wrapper th {
    /* Place fixed-th-table th-cells above 
       scrolled-td-table td-cells.
     */
    position: relative;
    z-index: 1;
}
.scrolled-td-table-wrapper td {
    /* Place scrolled-td-table td-cells
       above fixed-th-table.
     */
    position: relative;
}
.scrolled-td-table-wrapper {
   /* Make horizonal scrollbar if needed */
   overflow-x: auto;
}


/* Simulating border-collapse: collapse,
   because fixed-th-table borders
   are below ".scrolling-td-wrapper table" borders
*/

table {
    border-spacing: 0;
}
td, th {
   border-style: solid;
   border-color: black;
   border-width: 1px 1px 0 0;
}
th:first-child {
   border-left-width: 1px;
}
tr:last-child td,
tr:last-child th {
   border-bottom-width: 1px;
}

/* Unimportant styles */

.container {
    width: 250px;
}
td, th {
   padding: 5px;
}
</style>
</head>

<body>
<div class="container">

<div class="fixed-th-table-wrapper">
<!-- fixed-th-table -->
<table>
    <tr>
         <th>aaaaaaa</th>
         <td>ccccccccccc asdsad asd as</td>
         <td>ccccccccccc asdsad asd as</td>
    </tr>
    <tr>
         <th>cccccccc</th>
         <td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
         <td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
    </tr>
</table>
</div>

<div class="scrolled-td-table-wrapper">
<!-- scrolled-td-table
     - same as fixed-th-table -->
<table>
    <tr>
         <th>aaaaaaa</th>
         <td>ccccccccccc asdsad asd as</td>
         <td>ccccccccccc asdsad asd as</td>
    </tr>
    <tr>
         <th>cccccccc</th>
         <td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
         <td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
    </tr>
</table>
</div>

</div>
</body>
</html>

2013-07-09 20:42:19

对于2017年之后发布的大多数浏览器:

你可以使用位置:粘性。= css-sticky看到https://caniuse.com/壮举。

不需要固定宽度的列。

运行下面的代码片段，看看它的工作原理。

.tscroll { width: 400px; overflow-x: scroll; margin-bottom: 10px; border: solid black 1px; } .tscroll table td:first-child { position: sticky; left: 0; background-color: #ddd; } .tscroll td, .tscroll th { border-bottom: dashed #888 1px; } <html> <div class="tscroll"> <table> <thead> <tr> <th></th> <th colspan="5">Heading 1</th> <th colspan="8">Heading 2</th> <th colspan="4">Heading 3</th> </tr> </thead> <tbody> <tr> <td>9:00</td> <td>AAA</td> <td>BBB</td> <td>CCC</td> <td>DDD</td> <td>EEE</td> <td>FFF</td> <td>GGG</td> <td>HHH</td> <td>III</td> <td>JJJ</td> <td>KKK</td> <td>LLL</td> <td>MMM</td> <td>NNN</td> <td>OOO</td> <td>PPP</td> <td>QQQ</td> </tr> <tr> <td>10:00</td> <td>AAA</td> <td>BBB</td> <td>CCC</td> <td>DDD</td> <td>EEE</td> <td>FFF</td> <td>GGG</td> <td>HHH</td> <td>III</td> <td>JJJ</td> <td>KKK</td> <td>LLL</td> <td>MMM</td> <td>NNN</td> <td>OOO</td> <td>PPP</td> <td>QQQ</td> </tr> <tr> <td>11:00</td> <td>AAA</td> <td>BBB</td> <td>CCC</td> <td>DDD</td> <td>EEE</td> <td>FFF</td> <td>GGG</td> <td>HHH</td> <td>III</td> <td>JJJ</td> <td>KKK</td> <td>LLL</td> <td>MMM</td> <td>NNN</td> <td>OOO</td> <td>PPP</td> <td>QQQ</td> </tr> <tr> <td>12:00</td> <td>AAA</td> <td>BBB</td> <td>CCC</td> <td>DDD</td> <td>EEE</td> <td>FFF</td> <td>GGG</td> <td>HHH</td> <td>III</td> <td>JJJ</td> <td>KKK</td> <td>LLL</td> <td>MMM</td> <td>NNN</td> <td>OOO</td> <td>PPP</td> <td>QQQ</td> </tr> <tr> <td>13:00</td> <td>AAA</td> <td>BBB</td> <td>CCC</td> <td>DDD</td> <td>EEE</td> <td>FFF</td> <td>GGG</td> <td>HHH</td> <td>III</td> <td>JJJ</td> <td>KKK</td> <td>LLL</td> <td>MMM</td> <td>NNN</td> <td>OOO</td> <td>PPP</td> <td>QQQ</td> </tr> <tr> <td>14:00</td> <td>AAA</td> <td>BBB</td> <td>CCC</td> <td>DDD</td> <td>EEE</td> <td>FFF</td> <td>GGG</td> <td>HHH</td> <td>III</td> <td>JJJ</td> <td>KKK</td> <td>LLL</td> <td>MMM</td> <td>NNN</td> <td>OOO</td> <td>PPP</td> <td>QQQ</td> </tr> <tr> <td>15:00</td> <td>AAA</td> <td>BBB</td> <td>CCC</td> <td>DDD</td> <td>EEE</td> <td>FFF</td> <td>GGG</td> <td>HHH</td> <td>III</td> <td>JJJ</td> <td>KKK</td> <td>LLL</td> <td>MMM</td> <td>NNN</td> <td>OOO</td> <td>PPP</td> <td>QQQ</td> </tr> <tr> <td>16:00</td> <td>AAA</td> <td>BBB</td> <td>CCC</td> <td>DDD</td> <td>EEE</td> <td>FFF</td> <td>GGG</td> <td>HHH</td> <td>III</td> <td>JJJ</td> <td>KKK</td> <td>LLL</td> <td>MMM</td> <td>NNN</td> <td>OOO</td> <td>PPP</td> <td>QQQ</td> </tr> <tr> <td>17:00</td> <td>AAA</td> <td>BBB</td> <td>CCC</td> <td>DDD</td> <td>EEE</td> <td>FFF</td> <td>GGG</td> <td>HHH</td> <td>III</td> <td>JJJ</td> <td>KKK</td> <td>LLL</td> <td>MMM</td> <td>NNN</td> <td>OOO</td> <td>PPP</td> <td>QQQ</td> </tr> </tbody> </table> </div>

2019-08-24 16:25:54

或者，用预先确定的大小(例如，通过高度:20em)样式tbody，并使用overflow-y:scroll;

然后，您可以有一个巨大的tbody，它将独立于页面的其余部分滚动。

2009-08-21 14:33:29

//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>;
}

2014-03-19 14:05:08

我如何创建一个固定/冻结左列和可滚动的主体HTML表?

推荐文章

最新文章

标签