固定列表定位

Question

我正试图在第一列固定的表中添加垂直滚动。

我有一个水平滚动的表，我希望第一列保持不变。但当表的高度超过div的高度时，第一列就会位于外部。主要是因为它有固定的位置。我没有办法解决这个问题。

我的html是，

   <div class="table-wrapper">
<table id="consumption-data" class="data">
    <thead class="header">
        <tr>
            <th>Month</th>
            <th>Item 1</th>
            <th>Item 2</th>
            <th>Item 3</th>
            <th>Item 4</th>
        </tr>
    </thead>
    <tbody class="results">
        <tr>
            <th>Jan</th>
            <td>3163</td>
            <td>3163</td>
            <td>3163</td>
            <td>3163</td>
        </tr>
        <tr>
            <th>Feb</th>
            <td>3163</td>
            <td>3163</td>
            <td>3163</td>
            <td>3163</td>
        </tr>
        <tr>
            <th>Mar</th>
            <td>3163</td>
            <td>3163</td>
            <td>3163</td>
            <td>3163</td>
        </tr>
        <tr>
            <th>Apr</th>
            <td>3163</td>
            <td>3163</td>
            <td>3163</td>
            <td>3163</td>  
        </tr>
        <tr>    
            <th>May</th>
            <td>3163</td>
            <td>3163</td>
            <td>3163</td>
            <td>3163</td>
        </tr>
        <tr>
            <th>Jun</th>
            <td>3163</td>
            <td>3163</td>
            <td>3163</td>
            <td>3163</td>
        </tr>
        <tr>
            <th>...</th>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
    </tbody>
</table>

和css作为，

  .table-wrapper { 
overflow-x:scroll;
overflow-y:visible;
width:250px;
margin-left: 120px;
height:200px;
  }

td, th {
padding: 5px 20px;
width: 100px;
}
 th:first-child {
position: fixed;
left: 5px
 }

演示

Answer 1

我已经更新了答案，正如下面我的答案评论中所指出的。

您需要通过使用DIV而不是表来更新HTML结构（可能不是理想的解决方案）。使用当前的HTML结构是无法实现这一点的，除非您能够容忍垂直滚动冻结第一列，如图所示。

如果你仔细考虑，你试图让两个子元素<th>和<td>能够垂直滚动，但一个子元素在水平滚动时保持静止。CCD_ 3和CCD_。

Answer 2

添加此css代码

tr{
     margin-left: 120px;
}

并删除

th:first-child {
    position: fixed;
    left: 5px
}

Answer 3

使用Sticky Table jQuery插件。您可以使用它来创建固定列，而无需更改表结构。