css - 使用 CSS，如何使溢出 :visible; contents overlap adjacent <td> cells?

Question

我的表格有以下 CSS 样式代码:

table {
        table-layout: fixed;
}
td {
        overflow: hidden;
        white-space:nowrap;
}
td:hover {
        overflow: visible;
}

但是，当我将鼠标悬停在 <td> 上时内容(文本)被隐藏的元素，结果是内容变得可见，但在相邻单元格(右侧)的内容后面。

我不认为z-index可以应用于表格单元格元素，所以我可以在 td:hover 中指定一个 CSS 属性吗？样式将使我的内容成为 <td>标签与相邻单元格中的内容重叠？

表格元素包含从数据库中提取的文本字符串。在不添加水平滚动条的情况下，表格本身已经尽可能大。

Answer 1

我没有按照我想要的方式解决它，所以仍然想看看是否有人知道该怎么做。

但是，我确实找到了使用以下 CSS 属性的合适替代方案:

table {
    table-layout: fixed;
}
td {
    overflow: hidden;
    white-space: nowrap;
}
tr:hover td {
    overflow: visible;
    white-space: normal;
}

这有效地设置了一个固定的表格大小，并在该大小内保持行紧凑，直到用户将鼠标悬停在表格行上。发生这种情况时，悬停的行会垂直扩展以适合单元格内容。由于 table-layout:fixed 属性，单元格宽度仍然保留。

此解决方案的缺点是，如果您的单元格内容不是带空格的文本，则效果不佳。没有空格的文本不可靠地换行，而对象显然根本不换行。