HTML table text-alignment (tbody adapted to thead)

Question

The Table with bad text-alignment

In the Picture u see the table with bad text-alignment. The elements of tbody don't fit to those of thead. It's important that the head of the table is fixed, so you can see it even when you scroll down.

The classes i am using for this table are table-hover and my own class "table_Bookingsystem" which propertys are listed below

.table_Bookingsystem{
      table-layout: fixed;
      border-collapse: collapse;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      text-align: left;
      padding-top: 16px;
      padding-bottom: 16px;
      border: 1px solid #ccc !important;
    }

    .table_Bookingsystem tbody{
      display:block;
      width: 100%;
      overflow: auto;
    }

    .table_Bookingsystem thead tr {
      display: block;
    }

    .table_Bookingsystem tr{
      border-bottom: 1px solid #ddd;
    }

    .table_Bookingsystem thead {
      background: black;
      color:#fff;
    }

    .table_Bookingsystem th, .table_Bookingsystem td {
      padding: 5px;
      text-align: center;
      width: 5000px;  //important line
    }

    .table_Bookingsystem tbody tr:nth-child(even) {
      background-color: #e4ebf2;
      color: #000;
    }

<table class="table_Bookingsystem table-hover ">
                <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Auto</th>
                    <th scope="col">IMEI</th>
                    <th scope="col">Heimatstadt</th>
                    <th scope="col">derzeitige Stadt</th>
                    
                </tr>
                </thead>
                <tbody @if(count($cars) > 9) style="height: 300px;" @endif>
                @foreach($cars as $car)
                    <tr class="table-row clickable-row" data-href='/cars/{{$car->id}}'>
                        <th>{{$loop->iteration}}</th>
                        <td>{{$car->name}}</td>
                        <td>{{$car->IMEI}}</td>
                        <td>
                            <?php
                            $city = Illuminate\Support\Facades\DB::table('cities')->where('id','=', $car->id_homeCity)->get('name');
                            echo $city[0]->name; ?>
                        </td>
                        <td>
                            <?php
                            $city = Illuminate\Support\Facades\DB::table('cities')->where('id','=', $car->id_currentCity)->get();
                            echo $city[0]->name; ?>
                        </td>
                        
                    </tr>
                @endforeach
                </tbody>
            </table>

When i set the width to 250px it looks a little better but then there is a big edge when i have only 4 or less columns. Is there any way to keep the fixed header and put every -element of directly under the corresponding -element of ?

Answer 1

I write a basic table like you share in screenshot. You have added some extra CSS that's why your table ui disturb.

Step 1 - Remove below CSS, we don't need to block table row.

.table_Bookingsystem thead tr {
  display: block;
}

Step 2 - Remove display: block; from table_Bookingsystem tbody

.table_Bookingsystem tbody{
   width: 100%;
   overflow: auto;
}

Step 3 - I just remove width: 5000px; from .table_Bookingsystem th, .table_Bookingsystem td, if you want apply width: 5000px; on each td/th, revert it.

All Mentioned are applied on below code snippet. Try it I hope it'll help you out. Thanks

.table_Bookingsystem th, .table_Bookingsystem td {
   padding: 5px;
   text-align: center;
}

.table_Bookingsystem{
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  padding-top: 16px;
  padding-bottom: 16px;
  border: 1px solid #ccc !important;
}

.table_Bookingsystem tbody{
  width: 100%;
  overflow: auto;
}

.table_Bookingsystem tr{
  border-bottom: 1px solid #ddd;
}

.table_Bookingsystem thead {
  background: black;
  color:#fff;
}

.table_Bookingsystem th, .table_Bookingsystem td {
  padding: 5px;
  text-align: center;
}

.table_Bookingsystem tbody tr:nth-child(even) {
  background-color: #e4ebf2;
  color: #000;
}

<table class="table_Bookingsystem">
  <thead>
    <tr>
      <th>#</th>
      <th>Auto</th>
      <th>IMEI</th>
      <th>Heimatstadt</th>
      <th>derzeitige Stadt</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Auto</td>
      <td>0001</td>
      <td>Regensburg</td>
      <td>Regensburg</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Auto</td>
      <td>0001</td>
      <td>Regensburg</td>
      <td>Regensburg</td>
    </tr>
  </tbody>
</table>