Html 如何使用overflow:hidden on mouse hover显示单元格的全部内容？

我有一个表，它有时有长字符串作为值。 如果溢出的内容是隐藏的，如何显示tablecell的整个内容

我认为细胞应该扩张，同时重叠相邻的细胞而不移位

当前我正在使用此css：

table{
  table-layout: fixed;
  margin-top: 24px;

  th{
    white-space: normal;
    word-wrap: break-word;
  }

  td{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  td:hover{
    overflow: visible;
    z-index: 1;
    background-color: grey;
  }
}

这会使溢出的文本可见并重叠相邻单元格。但是背景/单元格不会跟随

---

谢谢

这就是我为你的处境所得到的：

首先，我更改了css，以便表选择器不包含其他选择器。（请注意，如果您使用的是SASS或更少版本，则不需要这样做，正如评论中所指出的那样）

希望这就是你想要实现的

编辑

---

经过一些评论，并且知道您不希望相邻的单元格移动，我发现了这个（这个在悬停时仍然有点不稳定，所以可能其他人知道如何解决这个问题；我现在不知道如何解决这个问题）

类似的问题？工具提示呢？我想如果不使用JS，你的方法会有一些问题。我真的不知道你的页面是什么样子的——有多少列等等。只是谷歌一些想法。你可以有一个手风琴或者其他能从桌子上展示更多东西的东西。这里有一些想法（我在谷歌上搜索了“大数据的现代网页设计”）-这里有更多更新：我最终使用了一个引导模式对话框。单击一行时，将在模式对话框中显示该行的所有（完整）值。非常感谢您的帮助。为什么您要更改末端支架的位置？如果他使用的是SASS或更少，这应该是好的，并且是推荐的。另外，不推荐使用“初始”-即不支持它-这-嗯，我的细胞仍然没有扩展。这可能是因为我的表位于bootstrap col div

中吗？另外，我不希望表格扩展或相邻单元格移动。完全正确，我知道这一点。我之所以改变这一点，是因为我认为他没有使用其中的一个，因为他没有提到关于它的任何东西（不是在帖子中，也不是在标签中），因为我看不到除了错误放置的花括号以外的任何其他原因。这就是我更改它的原因，抱歉没有提及/解释。

table{
  table-layout: fixed;
  margin-top: 24px;
} <--- place it here instead of at the end of the css rules for the table

th{
  white-space: normal;
  word-wrap: break-word;
}

td{
  max-width : 50px; 
  white-space : nowrap;
  overflow : hidden;
}

td:hover{
  overflow: visible;
  z-index: 2;
  background-color: grey;
  max-width:initial;
}