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，以便表选择器不包含其他选择器。（请注意，如果您按照评论中的指示使用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;
}

然后我还调整了css规则＆＃39; td＆＃39;和＆＃39; td：hover＆＃39;：

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

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

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

修改

经过一些评论并知道你不希望相邻的细胞移动后，我发现了这个jsFiddle

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

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

1 个答案: