使用 CSS 弹出图像时表格单元格大小发生变化答案

【问题标题】：table cell size changes when popping up images using CSS使用 CSS 弹出图像时表格单元格大小发生变化
【发布时间】：2020-01-01 23:11:54
【问题描述】：

我有一个 HTML/CSS 页面——没有 javascript——我试图在其中显示缩略图图像的表格/网格。当用户将鼠标悬停在其中一张图片上时，我希望显示全尺寸图片。

我创建了一个小提琴来显示我在哪里：https://jsfiddle.net/StephaneCharette/y50rn9g4/

我不知道如何解决的问题：当显示弹出图像时，该行的高度被修改，这会将所有内容向下推。

我已经设法使用table-layout:fixed; 固定每个单元格的宽度，然后为表格和第一行中的每个单元格指定宽度。（虽然我不确定我这样做是否正确。）但是如何防止高度发生变化？

table, th, td
{
  border:1px solid black;
  padding: 0.5em;
}
table
{
  border-collapse:collapse;
  table-layout: fixed;
  width: 1000px; // table-layout fixed seems to only works if you then give it a width
}
.thumb
{
  border: 1px solid black;
  width: 320px;
  height: auto;
  position: relative; // need to specify 'position' to use z-index
  z-index: 0;
}
.thumb:hover
{
  width: auto;
  height: auto;
  z-index: 999;
  border-radius: 10px;
  box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.75);
}

<table>
  <tr>
    <th style="width: 10em;">th1</th>
    <th style="width: 330px;">th2</th>
    <th style="width: 330px;">th3</th>
    <th style="width: 330px;">th4</th>
  </tr>
  <tr>
    <th>row1</th>
    <td>some example text before the image <img class="thumb" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Alice_%28apple%29.jpg" /></td>
    <td><img class="thumb" src="https://upload.wikimedia.org/wikipedia/commons/f/f1/Ambrosia_apples_2017_A3.jpg" />some example text after the image</td>
    <td><img class="thumb" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Malus-Ananasrenette.jpg" /></td>
  </tr>
  <tr>
    <th>row2</th>
    <td><img class="thumb" src="https://upload.wikimedia.org/wikipedia/commons/4/41/Arkansas_Black_apples_%28cropped%29.jpg" /></td>
    <td><img class="thumb" src="https://upload.wikimedia.org/wikipedia/commons/e/e8/Aroma.jpg" /></td>
    <td><img class="thumb" src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Malus-Boskoop_organic.jpg" /></td>
  </tr>
</table>

【问题讨论】：

当我将鼠标悬停在第二行的第一张图片上时，图片变大了，但不推送其他图片，这就是你想要的吗？
@MariosNikolaou 我希望表格单元格不调整大小。没有宽度，也没有高度。在这个小提琴中只有 2 行，所以看起来还不错，但在我的现实世界中，有很多行，我希望网格保持不变。

标签： html css html-table

【解决方案1】：

只需在您的 css 中替换此样式

table, th, td {
    border: 1px solid black;
    padding: 0.5em;
    position: relative;
}

.thumb:hover {
    width: auto;
    height: auto;
    z-index: 999;
    border-radius: 10px;
    box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.75);
    position: absolute;
    top: 0;
    left: 0;
}

【讨论】：

【解决方案2】：

您可以将position:absolute 添加到.thumb:hover https://jsfiddle.net/0pmjsybr/

【讨论】：

【解决方案3】：

检查我的 jsfiddle 代码here。同样在hover 上，图像得到全宽和全高，看起来很糟糕并且覆盖了其他所有内容。我已经设置在hover，图像宽度为600px。

 .thumb:hover => width: 600px;

【讨论】：