Using CSS, how can I do an overflow: visible; content overlapping neighboring <td> cells?

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 find an element <td>whose contents (text) are hidden, the result is that the contents become visible, but the contents of the neighboring cell (on the right) are behind .

I don’t think it z-indexcan be applied to table cell elements, so is there a CSS attribute that I can specify in my style td:hoverthat will make the contents of my tag <td>overlap the contents in adjacent cells?

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

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;
}