CSS cal c () не работает для центрирования элемента td

Question

Я хочу создать таблицу, второй столбец (который представлен одной ячейкой) помещается в центр страницы. Я пытаюсь использовать функцию cal c () для этого, но она не работает. Вот мой код:

.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>

Что не так с моим кодом?

Answer 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>