内容增长时如何阻止表调整大小？

Question

我有一个table,其中的细胞充满了图片.当你将鼠标悬停在它们上面时,我希望这些图片变得更大,我希望桌子的细胞保持相同的大小.

将img样式更改为position:relative不起作用.改变它position:absolute确实有效,但我不知道图像的绝对位置.

使用CSS有没有一个优雅的解决方案？我宁愿不使用任何JavaScript.

Answer 1

使用style="table-layout:fixed;",但这会使文本或图像与其他列重叠,以防超出宽度.确保不要放置没有空格的长文本短语.

为防止列内容重叠，您可以另外使用text-overflow：省略号，它与overflow结合使用：用点隐藏隐藏的cuttet内容...后缀表示法：.myTable {table-layout：fixed;} .myTable td {text-overflow：省略号; 溢出-x：隐藏；} (2认同)

Answer 2

使用table-layout: fixed你的表和表本身和/或它的细胞一些固定的宽度.

Answer 3

在您的单元格中使用最小宽度,请在此处查看示例

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