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

Question

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

标签： htmlcsshtml-table

Answer 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;
}