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属性，单元格宽度仍然保留。

此解决方案的缺点是，如果您的单元格内容不是带有空格的文本，则它不能很好地工作。没有空格的文本不可靠地包裹，对象显然根本不包裹。

Answer 2

我认为以下工作：

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

使用CSS，我如何进行溢出：可见;内容重叠相邻的细胞？

2 个答案: