使用 overflow-x 在每一行的右侧放置一个按钮

Question

我想在 table 的每一行旁边添加一个按钮。情节扭曲，table 位于 div 内，具有固定宽度和 overflow-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>

使用 overflow-x 在每一行的右侧放置一个按钮

Position a button on the right of each row with overflow-x

html

css

html-table