在带有overflow-x的每行右侧放置一个按钮

Question

我想在表的每行旁边添加一个按钮。情节扭转，表是在一个div与固定的宽度和溢出x响应。我希望按钮显示在容器div外的每行旁边。

在我当前的代码中，按钮确实显示在行旁边，但停留在固定的div中。

<div style="width:100px; overflow-x: scroll;">
<table>
<thead>
<tr>
<th>ID</th><th>ID</th><th>ID</th><th>ID</th><th>ID</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td><td>1</td><td>2</td><td>3</td><td>4</td>
<td>
<div style="position:relative; width:0px;">
<button style="position:absolute;left:10px;">Edit</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>

Answer 1

解决方法是在最后一列使用位置粘贴。

position: sticky; right: 0px

参考文献:W3 Schools. 下面是代码片段:

<div style="width:100px; overflow-x: scroll;">
<table>
<thead>
<tr>
<th>ID</th><th>ID</th><th>ID</th><th>ID</th><th>ID</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td><td>1</td><td>2</td><td>3</td><td>4</td>
<td style="position: sticky; right: 0px">
<button>Edit</button>
</td>
</tr>
</tbody>
</table>
</div>