使用CSS，我如何使溢出：可見;內容重疊鄰近​​單元格？

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