Question

I have the following CSS style code for my table:

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

However, when I hover over a <td> element whos contents (text) are hidden, the result is that the contents become visible but are behind the content of the adjacent cell (right side).

I do not think that z-index can be applied to table cell elements, so is there a CSS attribute that I can specify within my td:hover style which will make the content of my <td> tag overlap the content in adjacent cells?

The table elements contain strings of text pulled from a database. The table itself is already as large as it can be without adding a horizontal scrollbar.

Answer 1

I didn’t solve it the way I wanted, so still would like to see if anyone knows how to do that.

However, I did find a suitable alternative using the following CSS attributes:

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

This effectively sets a fixed table size and keeps the rows compact within that size until the user hovers over a table row. When that occurs, the row being hovered over expands vertically to suit the cell contents. Cell width is still preserved thanks to the table-layout:fixed attribute.

The downside to this solution is that it does not work very well if your cell content is anything other than text with white space. Text without white space wraps unreliably and objects obviously do not wrap at all.