Align table header to left of table

Question

I created a html table and I want to align the elements columnwise vertically so they start at the same position.

This is what it looks like right now:

I want it to look like:

My code is:

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

I tried to change to text-align:left; for the h1 and also tried with grid layout. but with grid it started a little bit far left. is there a possibility with position to fix this? As far as I can see it it works more parent to child and not child to child. I even tried with list for the elements but just got more buggy actually. I was not able to align the content at all. I guess list is really more for text.

Any idea on this is appreciated, thanks in advance!

Answer 1

Use align-items:left on your flexbox container and text-align:left on table headers.

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