现在我已经将数据格式化为表元素。如何使标题位于每列数据的后面，并使标题始终偏离文本中心？另外，我如何将标题右对齐（注意，“单身”和“统计”标题中的最后一个字符垂直对齐）。
This is what I want it to look like
其中一个表的html是这样的（我使用react）：

<table className="results-table">
      <thead>
        <tr>
          <td>
            <h1 className="heading">Singles</h1>
          </td>
          <td>
            <h1 className="heading">a5</h1>
          </td>
          <td>
            <h1 className="heading">a12</h1>
          </td>
        </tr>
      </thead>
      <tbody>
          <tr>
            <td>34.23</td>
            <td>44.42</td>
            <td>23.34</td>
          </tr> ...
      </tbody>
    </table>

编辑：我能够修改Andrei Fedorov的解决方案以满足我的约束。如果你有更简单或更好的解决方案，请随时回答。

th {
  font-size: 70px;

  color: var(--heading-color);
  -webkit-text-stroke-color: var(--heading-color);
  -webkit-text-stroke-width: 3px;

  position: relative;
  z-index: -1;
  transform: scale3d(0.7, 1, 1) translate(-90%, 40%);
  text-align: right;
}