将表格标题与表格左侧对齐[重复]

Question

我创建了一个 html 表格，我想将元素按列垂直对齐，以便它们从同一位置开始。

这就是现在的样子：

我希望它看起来像：

我的代码是：

.flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex-container>div {
  padding: 10px;
}

<div class="flex-container">
  <div>
    <h1 class="h1_rentings">Buchungen</h1>
  </div>
  <div>
    <table class="center">
      <tr class="header_row">
        <th>Ladestand</th>
        <th>Nötige Distanz</th>
        <th>Beginn</th>
        <th>Ende</th>
      </tr>
      <tr class="white_row">
        <td>60</td>
        <td>100</td>
        <td>02.04.2020 08:00</td>
        <td>02.04.2020 12:30</td>
      </tr>
      <tr>
        <td>10</td>
        <td>50</td>
        <td>08.04.2020 11:45</td>
        <td>08.04.2020 19:00</td>
      </tr>
      <tr class="white_row">
        <td>33</td>
        <td>222</td>
        <td>12.04.2020 09:00</td>
        <td>12.04.2020 16:15</td>
      </tr>
    </table>
  </div>
</div>

我尝试将 h1 更改为 text-align:left; 并尝试使用网格布局。但是对于网格，它开始有点偏左。 position 有可能解决这个问题吗？据我所知，它更适合父母对孩子，而不是孩子对孩子。我什至尝试使用元素列表，但实际上只是有更多错误。我根本无法对齐内容。我想 list 真的更多的是文本。

对此的任何想法表示赞赏，在此先感谢！

Answer 1

在弹性盒容器上使用align-items:left，在表头上使用text-align:left。

.flex-container {
  display: flex;
  flex-direction: column;
  align-items: left;
}

.flex-container>div {
  padding: 10px;
}

th{
  text-align:left;
}
/* this code below is just to outline the cells */
td, tr, th{
  border:1px solid;
}

<div class="flex-container">
  <div>
    <h1 class="h1_rentings">Buchungen</h1>
  </div>
  <div>
    <table class="center">
      <tr class="header_row">
        <th>Ladestand</th>
        <th>Nötige Distanz</th>
        <th>Beginn</th>
        <th>Ende</th>
      </tr>
      <tr class="white_row">
        <td>60</td>
        <td>100</td>
        <td>02.04.2020 08:00</td>
        <td>02.04.2020 12:30</td>
      </tr>
      <tr>
        <td>10</td>
        <td>50</td>
        <td>08.04.2020 11:45</td>
        <td>08.04.2020 19:00</td>
      </tr>
      <tr class="white_row">
        <td>33</td>
        <td>222</td>
        <td>12.04.2020 09:00</td>
        <td>12.04.2020 16:15</td>
      </tr>
    </table>
  </div>
</div>