Как обеспечить, чтобы ячейки таблицы в фиксированной головке были одинаковой ширины с ячейками в прокручиваемом теле? - PullRequest
Новая
       3

Как обеспечить, чтобы ячейки таблицы в фиксированной головке были одинаковой ширины с ячейками в прокручиваемом теле?

0 голосов
/ 07 мая 2020

Мой HTML для таблицы такой (in tbody, data is loaded from an ajax call): 

<table class="table table-sm table-bordered text-center">
    <thead class="text-center text-white">
        <tr>
            <td>Country</td>
            <td>Crop</td>
            <td>Trials</td>
            <td>Nurseries</td>
            <td>Unspecified</td>
        </tr>
    </thead>
    <tbody id="country-crop-trials"></tbody>
</table>

И мой CSS такой 

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: white;
}

::-webkit-scrollbar-thumb {
    background: black;
}

thead{
    display: block;
    background-color: #08381f;
    display: table;
    width: calc(100% - 5px);
}

tbody {
    display: block;
    max-height: 360px;
    width: calc(100% - 5px);
    overflow-y: scroll;
}

И моя таблица отображается следующим образом: enter image description here

Я пытался изменить некоторые свойства стиля, но не могу понять. Кто-нибудь, пожалуйста, помогите мне, чтобы столбцы в заголовке таблицы выровнялись со столбцами в теле таблицы

1 Ответ

0 голосов
/ 08 мая 2020

Вы можете использовать table-layout: fixed, чтобы столбцы растягивались вместе с заголовком таблицы. Однако, если вы используете position: fixed в заголовке таблицы, вы столкнетесь с большим количеством проблем с макетом.

Если вам все еще нужно продолжить с тегом <table>, подумайте об игре с display: flex на tr и используйте position: sticky.

Посмотрите демонстрацию ниже. 

* {
  margin: 0
}

.table {
  table-layout: fixed;
  width: 100%;
}

.table tr {
  display: flex;
  width: 100%;
}

.table td {
  width: 20%;
  padding: 5px;
}

thead tr {
  position: sticky;
  top: 0;
  background: #FFF;
}
<table class="table table-sm table-bordered text-center">
  <thead class="text-center text-white">
    <tr>
      <td>Country</td>
      <td>Crop</td>
      <td>Trials</td>
      <td>Nurseries</td>
      <td>Unspecified</td>
    </tr>
  </thead>
  <tbody id="country-crop-trials">
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>

  </tbody>
</table>
...