在行悬停时显示最后一个表格列答案

【问题标题】：Show last table column on line hovering在行悬停时显示最后一个表格列
【发布时间】：2020-07-27 16:15:21
【问题描述】：

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

这是一个例子： https://jsfiddle.net/5x2wv160/1/

问题是表格的大小发生了变化，所以它向左移动了一点。

解决这个问题的想法是将最后一列更改为

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

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

有人有更好的想法吗？

【问题讨论】：

标签： javascript html css css-position

【解决方案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>

【讨论】：

正如您在我的小提琴中看到的那样，桌子居中，因此它正在移动。我想阻止移动。

【解决方案2】：

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

table {
  margin: 0 auto;
}

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

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

【讨论】：

【解决方案3】：

你是在正确的方式。但是如何只显示内容，因此悬停时的超链接。 tr td a { display:none; } VS tr:hover td a{ display:block} 所以内容不会左右移动。还为每个表格列设置标准宽度将防止列移动

【讨论】：

但是表格末尾是一个空列，在视觉上不是很好