悬停时显示最后 table 列

Question

居中的 table 是隐藏的最后一列。将鼠标悬停在特定行上时，我希望 table 显示该行的最后一列。这应该提供编辑和删除 (AJAX) 行的 content/object 的能力。

问题是 table 的尺寸改变了，所以它向左移动了一点。

我的想法是将最后一列更改为

tr > td:last-child {    
    position: relative;
}

但是我还必须设置什么基本元素才能设置显示样式？

有没有人有更好的主意？

Answer 1

检查这种在悬停到 <tr>

时显示最后一列的方式

.action {
  display: none;
}

tr:hover .action{
  display: block;
}

<table>
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content1</td>
      <td>Content2</td>
      <td class="action"><a href="#">Edit</a></td>
    </tr>
    <tr>
      <td>Content3</td>
      <td>Content4</td>
      <td class="action"><a href="#">Edit</a></td>
    </tr>
    <tr>
      <td>Content5</td>
      <td>Content6</td>
      <td class="action"><a href="#">Edit</a></td>
    </tr>
  </tbody>
</table>

Answer 2

你走对了。但是，如何只显示内容，从而在悬停时显示超链接。 tr td a { display:none; } VS tr:hover td a{ display:block} 所以内容不会左右移动。还为每个 table 列设置标准宽度将防止列移动

Answer 3

您可以像这样使用 visibility 而不是 dispay:none：

table {
  margin: 0 auto;
}

tr > td:last-child {
  visibility: hidden;
}

tr:hover > td:last-child {
  visibility: visible;
}

悬停时显示最后 table 列

Show last table column on line hovering

html

javascript

css

css-position