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 有没有可能解决这个问题？据我所知，它更适用于父对子而不是子对子。我什至尝试使用元素列表，但实际上却遇到了更多问题。我根本无法对齐内容。我想列表实际上更适合文本。

对此的任何想法表示赞赏，提前致谢！

Answer 1

在 flexbox 容器上使用 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>

将表格标题与表格左侧对齐

1 个答案: