html - 将鼠标悬停在表格上的某个单元格上时，试图使其他单元格收缩并使一个单元格扩展

Question

我正在努力做到这一点，当我悬停其中一个单元格时，它会变得更大，而所有其他单元格都变得更小 (但不会消失)，但我也不希望单元格扩展到表格之外或使表格的边框变大。

如何解决？

CSS 代码:

.Grid_Options {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    text-align: center;
    font-family: Titillium Web;
    background-color: #C0C0C0;
    border: 0;
}

.Grid_Options td {
    width: 300px;
    height: 200px;
    transition: 0.5s;
    font-size: 35px;
    color: black;
}

.Grid_Options td:hover {
    padding: 15px;
    position: relative;
    background-color: #686868;
    color: #DDD;
}

HTML代码:

      <table class="Grid_Options" cellspacing="0" cellpadding="0">
        <tbody>
          <tr>
                  <td>Placeholder</td>
                  <td>Placeholder</td>
              </tr>
              <tr>
                  <td>Placeholder</td>
                  <td>Placeholder</td>
              </tr>
              <tr>
                  <td>Placeholder</td>
                  <td>Placeholder</td>
              </tr>
            </tbody>
        </table>

Answer 1

I also don't want the cell to expand outside the table or make the borders of the table bigger.

我们可以通过删除 :hover 上的 padding 大小增加，并将其替换为 transform: scale 来实现。这不会影响 CSS 中任何其他元素的流程。

请注意，我们现在还需要将 overflow: hidden 添加到表格中，这样缩放后的单元格就不会溢出边缘。

.Grid_Options {
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  text-align: center;
  font-family: Titillium Web;
  background-color: #C0C0C0;
  border: 0;
  overflow: hidden; /* add this */
}

.Grid_Options td {
  width: 300px;
  height: 200px;
  transition: 0.5s;
  font-size: 35px;
  color: black;
}

.Grid_Options td:hover {
  transform: scale(1.1); /* add this */
  background-color: #686868;
  color: #DDD;
}

<table class="Grid_Options" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>Placeholder</td>
      <td>Placeholder</td>
    </tr>
    <tr>
      <td>Placeholder</td>
      <td>Placeholder</td>
    </tr>
    <tr>
      <td>Placeholder</td>
      <td>Placeholder</td>
    </tr>
  </tbody>
</table>