Используя CSS, как я могу сделать переполнение: видимым; содержимое перекрывают смежные <td>ячейки?

Question

У меня есть следующий код стиля CSS для моей таблицы:

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

Однако, когда я наведите курсор на элемент <td>, содержимое которого (текст) скрыто, в результате содержимое станет видимым, но будет на позади содержимого соседней ячейки (правая сторона).

Я не думаю, что z-index может быть применено к элементам ячейки таблицы, поэтому есть атрибут CSS, который я могу указать в моем стиле td:hover, чтобы содержимое моего тега <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;
}