如何显示带有溢出的单元格的全部内容：鼠标悬停时隐藏？

Question

我的表格有时有长字符串作为值。 如果溢出的内容被隐藏，我如何显示表格单元格的全部内容？

我认为单元格应该在重叠相邻单元格的同时扩展而不移动它们。

目前我正在使用这个 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;
  }
}

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

谢谢！

Answer 1

这是我针对您的情况得到的：jsFiddle

首先，我更改了css，使表格选择器不包含其他选择器。 （请注意，如果您使用的是 cmets 中指出的 SASS 或 LESS，则不需要这样做）

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'和'td:hover'的css规则：

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

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

希望这是您想要实现的目标。

编辑

经过一些 cmets 并且知道您不希望相邻单元格移动后，我发现了这个 jsFiddle

（这个在悬停时仍然有点跳动，所以也许其他人知道如何解决这个问题；我现在不知道如何解决这个问题）