html - 如何在固定表格布局上影响 td

Question

我试图在不影响其他单元格或表格的情况下为表格单元格设置动画。我想用对应于某种事件类型的类更改 td 的宽度和高度。我希望 td 变大并重叠其他单元格但不改变它们的位置。怎么办？

<table>
  <tr>
    <td class="change">
      A
    </td>
    <td class="change">
      B
    </td>
    <td class="change">
     C
   </td>
  </tr>
</table>

我的 CSS 应该是这样的:

table{
 table-layout: fixed;
 width: 4em;
 height: 2em;

}

.change{
 width: 1em;
 height: 1em;

}

 .change:hover{
 width: 3em;
 height: 3em;

}   

所以当我将鼠标悬停在 td 单元格上时，我只是想让它变大，但根本不影响其他单元格的位置或表格。我怎样才能做到这一点？

我只想使用 CSS，但溢出隐藏或空白都不能像这样工作，表格会到处移动......

我在编辑时添加了这个。 如果我在每个 td 中放置一个 div 并将 div 缩放得更大，那么在不拉伸(stretch)表格的情况下是否可以工作？喜欢

<table>
  <tr>
    <td>
      <div>
      A
      </div>
    </td>
    <td>
      <div class="change">
      B
      </div>
    </td>
    <td>
      <div>
     C
      </div>
   </td>
  </tr>
</table>

Answer 1

如果只是为了视觉效果 ，您可以选择 transform:scale(3); 将元素缩放三倍。 <强> DEMO

为了避免在内容内部缩放，做一个向下缩放，你可以设置 transform-origin。 <强> other example

无论如何，如果您插入更多内容，table-layout:fixed; 仍将允许单元格和整行垂直增长。