html - 具有方形单元格和居中内容的固定大小的表格

Question

我正在尝试构建一个这样的表

• 所有单元格都具有相同的大小和方形。
• 单元格大小与单元格内容无关。
• 单元格内容在单元格中水平和垂直居中。

例如看下图

我编辑了在这里找到的代码Make table cells square获得与上一张图像相似的输出。

body { font-size: 1.5em; }
table {
    width: 180px; /* fixed table width */
    margin: auto;
    border-collapse: collapse;
}
td, th {
    width: 33%; /* each cell has 1/3 of the total width */
    position: relative;
    border: 1px solid;
    text-align: center; /* content is horizontally centered */
}
th { background: yellow; }
td:before, th:before {
    content: '';
    display: block;
    margin-top: 30%; /* attempt to center the content vertically */
}
td:after, th:after {
    content: '';
    display: block;
    margin-top: 100%; /* set the height of the cell */
}
td div, th div {
    position: absolute;
    left: 0;
    right: 0;
}
th div { color: red; }

<table>
    <tr>
        <th><div>+</div></th>
        <th><div>0</div></th>
        <th><div>1</div></th>
    </tr><tr>
        <th><div>0</div></th>
        <td><div>0</div></td>
        <td><div>1</div></td>
    </tr><tr>
        <th><div>1</div></th>
        <td><div>1</div></td>
        <td><div>10</div></td>
    </tr>
</table>

结果与上图非常相似，但是如果表格 width 或 font-size 发生变化，垂直居中就会被打乱。

我认为唯一的问题是垂直居中。正如您从代码中看到的那样，我尝试通过手动设置 margin-top: 30% 使内容垂直居中。但是这个值需要根据表格的 width 和 font-size 相应地改变。

是否可以自动将内容垂直居中？

Answer 1

我会简化代码。我已经删除了很多定位代码和其他有利于简单表属性的东西。我正在使用 CSS Variables放在这里是为了更容易演示更改值，但如果您需要支持 Internet Explorer，则不需要使用它们。

我还添加了一些代码，当您单击以显示各种尺寸的居中作品时，它会增加表格及其字体的大小。

var fontSize = '1.5';
document.body.addEventListener('click', () => {
  var css = fontSize === '1.5' ?
    '--table-size: 300px; --font-size: 4rem;' :
    '--table-size: 180px; --font-size: 1.5rem;';
  fontSize = fontSize === '1.5' ? '4' : '1.5';
  document.documentElement.style.cssText = css;
});

:root {
  --table-size: 180px;
  --font-size: 1.5rem;
}

table {
  width: var(--table-size);
  height: var(--table-size);
  margin: auto;
  border-collapse: collapse;
  font-size: var(--font-size);
}

td,
th {
  border: 1px solid;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  width: calc(var(--table-size) / 3);
  max-width: calc(var(--table-size) / 3);
  max-height: calc(var(--table-size) / 3);
  overflow: hidden;
}

th {
  background: yellow;
}

th div {
  color: red;
}

<table>
  <tr>
    <th>
      <div>+</div>
    </th>
    <th>
      <div>0</div>
    </th>
    <th>
      <div>1</div>
    </th>
  </tr>
  <tr>
    <th>
      <div>0</div>
    </th>
    <td>
      <div>0</div>
    </td>
    <td>
      <div>1</div>
    </td>
  </tr>
  <tr>
    <th>
      <div>1</div>
    </th>
    <td>
      <div>1</div>
    </td>
    <td>
      <div>10</div>
    </td>
  </tr>
</table>