旋转表格中的文本（<th>标签）

Question

我希望表格的标题垂直显示，因为我要在表格中包含很多信息。我可以让它们旋转90度，但文本不会拉伸-整个文本都被压缩成几行。

这是现在的样子：

Current appearance of table

例如，我希望“超过0.5个目标”全部排在一条线上，而不是3条。

team_page.html：

  <table class="team_page">
      <tr>
        <th>Competition</th>
        <th>Date</th>
        <th>Match</th>
        <th>Opponent's Position</th>
      </tr>

team_page.css：

th {
    transform: rotate(-90deg);
    height: 150px;
}

文本已正确旋转，但不确定如何修复，因此文本全部显示在一行中，而不是散布在很多行中。

谢谢！