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

【问题标题】：How to stop table from resizing when contents grow?内容增长时如何阻止表格调整大小？
【发布时间】：2012-03-20 09:40:36
【问题描述】：

我有一个table，它的单元格中充满了图片。当您将鼠标悬停在图片上时，我希望图片变大，并且我希望表格的单元格保持相同的大小。

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

有没有使用 CSS 解决这个问题的优雅方法？我宁愿不使用任何 JavaScript。

【问题讨论】：

我使用的是 Firefox，图像在悬停时未居中于单元格。图像的左上角与单元格的左上角匹配。您在寻找哪种行为？

标签： html css html-table

【解决方案1】：

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

【讨论】：

在列内使用 div 并设置溢出：自动；将解决提到的关于重叠的问题。对吗？
为了防止列内容的重叠，您可以额外使用 text-overflow: ellipsis 结合溢出提供：用点隐藏不重叠的cuttet内容...后缀符号：.myTable{table -布局：固定；} .myTable td {文本溢出：省略号；溢出-x：隐藏；}

【解决方案2】：

为您的表格使用table-layout: fixed，为表格本身和/或其单元格使用一些固定宽度。

【讨论】：

【解决方案3】：

在你的单元格中使用 min-width，看看这里的例子

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

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

【讨论】：

【解决方案4】：

将vertical-align:top 添加到 td 元素。

【讨论】：

【解决方案5】：

你可以使用 position,z-index,left,top。

你应该这样看，

http://jsfiddle.net/wWTfs/

【讨论】：

这在 jsfiddle 中有效，但在 Firefox 和 Chrome 中都无效... WTH？
我在 chrome 和 IE 中尝试过。其作品。但是Firefox有问题。您可以将 #images tr td{display:inline-block;} 用于 FireFox。这是一个错误。从 Firefox 驱动。
小提琴上的图片链接坏了。

【解决方案6】：

使用 CSS 过渡。

.zoom {
  padding: 50px;
  background-color: green;
  transition: transform .2s; /* Animation */
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

<style>

</style>

<p>Hover over the div element.</p>
  <table>
  <tbody>
  <tr>
  <td>
<div class="zoom"></div>
</td>
<td> test text</td>
</tr>
</tbody>
</table>

w3Schools zoom hover

【讨论】：