如何确保单元格不会因内容而调整大小？

Question

设置table-layout: fixed后，所有单元格的大小都会相同，直到添加一些内容为止。即使有内容，有没有办法保持他们的大小相等？内容可以具有宽度/高度作为单元格的百分比，或者可以具有固定宽度。该表是响应式的（如果内容溢出，则应该隐藏）。

现在的样子（jsfiddle）：

table {
  table-layout: fixed;
  width: 40vw;
  height: 40vw;
}
td {
  border: 3px solid grey;
  padding: 0px;
  width: 40px;
}
.aligner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.content {
  height: 60px;
  width: 90%;
  background-color: green;
  border-radius: 20px;
}

<table>
  <tr>
    <td></td>
    <td>
      <div class="aligner">
      </div>
    </td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>
      <div class="aligner">

      </div>
    </td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>
      <div class="aligner">
        <div class="content">
          hello world
        </div>
      </div>
    </td>
    <td></td>
  </tr>
</table>

如果只用flexbox（即没有表格）就可以解决这个问题，但是我不知道如何使它总是固定数量相同的行和列，以便它看起来像表中的图像。

小：

中：

大

Answer 1

仅限CSS，您可以直接在width设置height和td，使用position:relative + overflow:hidden设置内部div到position:absolute。

<强> jsFiddle

td {
  border: 3px solid grey;
  width: 10vw;
  height: 10vw;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.aligner {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  margin: auto;
  height: 60px;
  width: 90%;
  background-color: green;
  border-radius: 20px;
}

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td><div class="aligner">hello world</div></td>
    <td></td>
  </tr>
</table>

或使用伪元素+填充技巧制作方形表单元格。

<强> jsFiddle

table {
  width: 40vw;
}
td {
  border: 3px solid grey;
  text-align: center;
  position: relative;
  overflow: hidden;
}
td:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.aligner {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  margin: auto;
  height: 60px;
  width: 90%;
  background-color: green;
  border-radius: 20px;
}

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td><div class="aligner">hello world</div></td>
    <td></td>
  </tr>
</table>