如何在内容增长时停止调整表格的大小？

我有一个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

如何在内容增长时停止调整表格的大小？

回答

相关问题