固定列滚动表答案

【问题标题】：Fixed column scroll table固定列滚动表
【发布时间】：2017-11-26 19:28:45
【问题描述】：

我有一个滚动表（您可以在 img 中看到一个示例）。在最后一列中，我有按钮来执行操作

我想修复此列并摇动其余部分。

我知道我必须使用位置（绝对），但如果我把钥匙放在外面。你知道修复最后一列并摇动其余部分的方法吗？

【问题讨论】：

请添加您的代码。
我可以展示你的编码吗？？
不幸的是，它是您使用 react 创建的表。 html 代码是自动创建的。我可以更改css、html ecc。表格的 CSS 是： .table-scrollbar { overflow-y: hidden;溢出-x：滚动；边距：5px 10px 5px 10px；边框：1px 实心#dddddd；边框顶部宽度：0；边框底部宽度：0；边框半径：5px 5px 0 0； } 如果有可能有一个小例子来说明如何做到这一点

【解决方案1】：

div {
  width: 200px;
  overflow-x: scroll;
  position: relative;
}

table {
  background: yellow;
}

.fixed {
  background: red;
  position: fixed;
  left: 210px;
}

<div>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
    <th>City</th>
    <th class="fixed">Year</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
    <td>London</td>
    <td class="fixed">1970</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
    <td>Madrid</td>
    <td class="fixed">1940</td>
  </tr>
</table>
</div>

<br>
<p>To test, scroll orizontally</p>

【讨论】：