如何在內容增長時停止調整表格的大小？

我有一個table，其中的細胞都充滿了圖片。我希望當你將鼠標懸停在它們上方時，圖片會變得更大，我希望桌子的單元格保持相同的大小。如何在內容增長時停止調整表格的大小？

改變img風格position:relative不起作用。將其更改爲position:absolute確實有效，但我不知道圖像的絕對位置。

有一種優雅的解決方案，使用CSS這個問題？我寧願不使用任何JavaScript。

來源

2012-03-01 Maarten

我使用Firefox的一個例子，圖像不居中上懸停的單元格。圖像的左上角與單元格的左上角相匹配。你在尋找哪種行爲？ – approxiblue 2012-03-01 20:59:03

使用style="table-layout:fixed;"，但是這樣會讓文字或圖像，在情況下，它超過寬度等欄目重疊。確保不要放置沒有空格的長文本短語。

來源

2012-10-25 18:52:06

在列中使用div並設置overflow：auto;將解決所提到的關於重疊的問題。對？ – 2013-10-21 11:09:56

爲防止列內容重疊，您可以使用文本溢出：省略號與溢出組合：隱藏不重疊的帶點內容的剪切內容...後綴符號： .myTable {table-layout：fixed; } .myTable td {text-overflow：ellipsis; overflow-x：hidden;} – Ruwen 2017-12-11 13:47:22

添加vertical-align:top到TD元素。

來源

2012-03-02 06:45:32 brains911

使用table-layout: fixed您的表和表本身和/或它的細胞一些固定的寬度。

來源

2012-03-02 07:00:50

你可以做你可以使用位置，z軸，左側，頂部。

你應該看看這樣一來，

http://jsfiddle.net/wWTfs/

來源

2012-03-02 07:01:09 sinanakyazici

這工作在jsfiddle，但在Firefox和Chrome都沒有... WTH？ – Maarten 2012-03-02 11:10:59

我在Chrome和IE中嘗試過。其作品。但Firefox已成問題。您可以爲FireFox使用**＃images tr td {display：inline-block;} **。這是一個錯誤。從Firefox驅動。 – sinanakyazici 2012-03-02 11:46:28

小提琴上的圖像鏈接已損壞。 – 2015-11-10 22:26:21

使用最小寬度在你的細胞，看看這裏

.cell1{ 
display:table-cell; 
width:100px; 
min-width:100px; 
border: 2px dashed #40f;  
}

http://jsfiddle.net/Gueorguip13/avzuadhp/3/

來源

2015-02-13 23:15:44 Gueorgui

如何在內容增長時停止調整表格的大小？

回答

相關問題