固定列滚动表

Posted 2023-03-06

【中文标题】固定列滚动表

【英文标题】：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>