将表格标题与表格左侧对齐并同时将所有内容居中答案

【问题标题】：Align table header to left of table and center everything at the same time将表格标题与表格左侧对齐并同时将所有内容居中
【发布时间】：2021-04-29 18:30:00
【问题描述】：

我创建了一个带有标题的 html 表格，我想将元素按列垂直对齐，以便它们从同一位置开始并同时在中心对齐。我找到了一种对齐和居中它们的方法，但是一旦居中它们就不再从同一行开始了。

我希望它看起来像：

我的代码是：

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


th{
  text-align:left;
}

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

.h1_rentings {
  text-align:center
}

table.center {
  margin-left: auto; 
  margin-right: auto;
}

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

我发现我可以使用align-items:left 使其在一行对齐，但它不再居中。我也尝试将其放入 div 中，并给 div 一些边距但没有成功。

我尝试将 h1 更改为 text-align:left;，但这使得它离得太远，并且还尝试了网格布局。使用网格，它也开始有点太左了。

position 有可能解决这个问题吗？据我所知，它更适合父母对孩子，而不是孩子对孩子。我什至尝试使用元素列表，但实际上只是有更多错误。我根本无法对齐内容。我想 list 真的更多的是文本。

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

【问题讨论】：

从运行脚本开始，只有 <h1> 没有与您的图像左对齐，这是您想要更改以使其左对齐的吗？
是的，这样 h1 从表格的开头开始。

标签： html css

【解决方案1】：

我会将容器居中并设置width: fit-content;。然后，标题应与（其容器的）左侧对齐。

.flex-container {
  width: fit-content;
  margin: 0 auto;
}


th{
  text-align:left;
}

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

.h1_rentings {
  text-align:left
}

table.center {
  margin-left: auto; 
  margin-right: auto;
}

<div class="flex-container">
  <h1 class="h1_rentings">Buchungen</h1>
    <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>

【讨论】：

我喜欢它很清楚！我认为您可以删除.h1_rentings { text-align:left }，因为它不需要。所以width: fit-content; 让它响应保证金？
是的，我保留了它，以便更清晰。但你是对的

【解决方案2】：

删除CSS 立即查看

.flex-container {
  max-width:500px;
  margin:0 auto;
}
th{
  text-align:left;
}
table.center {
  width:100%;
}

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

【讨论】：

为什么设置max-width:500px;很重要？