CSS calc() 不能使 td 元素居中答案

【问题标题】：CSS calc() not working for centring the td elementCSS calc() 不能使 td 元素居中
【发布时间】：2020-11-03 20:39:47
【问题描述】：

我想创建一个表格，第二列（由单个单元格表示）放在页面的中心。我正在尝试使用 calc() 函数来做到这一点，但是它不起作用。这是我的代码：

.bio {
  text-align: center;
  margin: 0 auto;
  width: calc(100% - 200px);
}

img {
  height: 200px;
}

<table cellspacing="20">
  <tr>
    <td>
      <img src="https://placehold.it/200x200" alt="image of me">
    </td>
    <td class="bio">
      <h1>Heading</h1>
      <p>Some text</p>
    </td>
  </tr>
</table>

我的代码有什么问题？

【问题讨论】：

使用表格元素有什么特别的原因吗？
表格不应该用于布局，除非您正在制作电子邮件模板 - 这看起来像是布局，在这种情况下您应该改用 css。
但是如果你坚持使用表格，你只需要给第一列的宽度为 200px，从第二列中取掉宽度并在表格中添加 100% 的宽度（如果我'我正确理解你的问题）
萝卜和皮特，谢谢你的建议。我正在做的是一个练习（它还显示了在 CSS 之前页面的结构），我想稍微修改一下布局，所以是的，我坚持使用表格。

标签： html css css-calc

【解决方案1】：

table {
  display: flex;
  justify-content: center;
  text-align: center;
}

img {
  height: 200px;
  position: absolute;
  left: 0;
  top: 0;
}

<table cellspacing="20">
  <tr>
    <td>
      <img src="https://placehold.it/200x200" alt="image of me">
    </td>
    <td class="bio">
      <h1>Heading</h1>
      <p>Some text</p>
    </td>
  </tr>
</table>

【讨论】：