Выравнивание текста в таблице HTML (tbody адаптировано под thead)

Question

Таблица с плохим выравниванием текста

На рисунке вы видите таблицу с плохим выравниванием текста. Элементы tbody не соответствуют элементам thead. Важно, чтобы заголовок таблицы был зафиксирован, чтобы вы могли видеть его даже при прокрутке вниз.

Классы, которые я использую для этой таблицы, - это table-hover, и мой собственный класс "table_Bookingsystem", свойства которого перечислены ниже

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

Когда я устанавливаю ширину в 250px, она выглядит немного лучше, но тогда у меня есть большой край, когда у меня есть только 4 или меньше столбцов. Есть ли способ сохранить фиксированный заголовок и поместить каждый -элемент непосредственно под соответствующий -элемент?

Answer 1

Я пишу базовый table, как вы делитесь в screenshot.Вы добавили несколько CSS , поэтому ваш table пользовательский интерфейс беспокоит.

Шаг 1 - Удалить ниже CSS, нам не нужно блокировать строку таблицы.

.table_Bookingsystem thead tr {
  display: block;
}

Шаг 2 - Удалить display: block; из table_Bookingsystem tbody

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

Шаг 3 - Я просто удаляю width: 5000px; из .table_Bookingsystem th, .table_Bookingsystem td, если вы хотите применить width: 5000px; к каждому td/th, отмените его.

Все упомянутые применяютсяфрагмент кода ниже.Попробуй, надеюсь, это тебе поможет.Спасибо

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

Answer 2

Попробуйте добавить text-align: center; к правилу .table_Bookingsystem tbody, так как оно соответствует правилу .table_Bookingsystem td.