html - 固定列滚动表

Question

我有一个滚动表(你可以在 img 中看到一个例子)。 在最后一列中，我有按钮来执行操作

我想把这个栏目修好，其他的都动摇

我知道我必须使用 position (absolute)，但如果我把键放在外面。 您知道修复最后一列并摇晃其余列的方法吗？

Answer 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>