HTML 'tbody' не прокручивается (игнорирует высоту и переполнение)

Question

Я пытаюсь получить липкий заголовок на HTML-таблице, как на картинке

( автоматическая ширина Я имею в виду, что последний столбец должен заполнить оставшееся пространство)

Мой CodePen здесь

, но, похоже,

tbody {
  height: 300px;
  overflow-y: scroll;

не работает ...

Answer 1

Попробуйте добавить display:block к вашим thead и tbody. Если вы хотите, чтобы фоны были в ваших строках, вам может потребоваться установить фиксированную ширину столбцов.

table.fixed-header {
  width: 100%;
  border: 1px solid red;
  border-collapse: collapse;
}
table.fixed-header thead {
  display:block;
}
table.fixed-header tbody {
  width: 100%;
  max-height: 200px;
  height: 200px;
  overflow-y: scroll;
  display:block;
}
table.fixed-header tbody td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.fixed-header th:nth-child(2),
table.fixed-header td:nth-child(2) {
  width: 200px;
  max-width: 200px;
}
table.fixed-header th:nth-child(1),
table.fixed-header td:nth-child(1) {
  width: 100px;
  max-width: 100px;
}
table.fixed-header thead,
table.fixed-header tbody > tr:nth-child(even) {
  background-color: #ffffff;
}
table.fixed-header tbody > tr:nth-child(odd) {
  background-color: lightblue;
}
table.fixed-header th,
table.fixed-header td {
  padding: 5px;
  border-left: 1px solid darkgray;
}
.colored {
  background: lightgreen;
}
caption {
  caption-side: top;
}

<div class="container">
  <h3>Sticky header example</h3>
  <div class="col-md-10 col-md-offset-1 colored">
    <table class="fixed-header">
      <caption align="top">Requirements: sticky header, fill the remaining container, 3 rows height and vertical scroll</caption>
      <thead>
        <tr>
          <th>Id (100px)</th>
          <th>Name (200px)</th>
          <th>Description (auto)</th>
        </tr>
      </thead>
      <tr>
        <td>654</td>
        <td>name 1</td>
        <td>this is a description</td>
      </tr>
      <tr>
        <td>963</td>
        <td>long long long very long name 2</td>
        <td>this is the second description</td>
      </tr>
      <tr>
        <td>753</td>
        <td>name 3</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>224</td>
        <td>name 4</td>
        <td>this is the 4th description</td>
      </tr>
      <tr>
        <td>687</td>
        <td>name 5</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>354</td>
        <td>name 6</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>965</td>
        <td>name 7</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>456</td>
        <td>name 8</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>789</td>
        <td>name 9</td>
        <td>this is the third description</td>
      </tr>
    </table>
  </div>
</div>

Answer 2

Я посмотрел немного больше на код и попробовал что-то сделать, чтобы он заработал, вот с чем я пришел. Я надеюсь, что это решение, которое вы ищете!

Чтобы немного уточнить, что я сделал. Я добавил display:block к телу таблицы и дал tr display:block и width:100%;

table.fixed-header {
  width: 100%;
  border: 1px solid red;
}
table.fixed-header thead {
  display: block;
}
table.fixed-header tbody {
  width: 100%;
  max-height: 300px;
  height: 300px;
  overflow-y: scroll;
  display: block;
}
table.fixed-header tbody td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.fixed-header tr {
  display: block;
  width: 100%;
}
table.fixed-header tr th:nth-child(2),
table.fixed-header tr td:nth-child(2) {
  width: 200px;
  max-width: 200px;
}
table.fixed-header tr th:nth-child(1),
table.fixed-header tr td:nth-child(1) {
  width: 100px;
  max-width: 100px;
}
table.fixed-header thead,
table.fixed-header tbody > tr:nth-child(even) {
  background-color: #ffffff;
}
table.fixed-header tbody > tr:nth-child(odd) {
  background-color: lightblue;
}
table.fixed-header th,
table.fixed-header td {
  padding: 5px;
  border-left: 1px solid darkgray;
}
.colored {
  background: lightgreen;
}
caption {
  caption-side: top;
}

<div class="container">
  <h3>Sticky header example</h3>
  <div class="col-md-10 col-md-offset-1 colored">
    <table class="fixed-header">
      <caption align="top">Requirements: sticky header, fill the remaining container, 3 rows height and vertical scroll</caption>
      <thead>
        <tr>
          <th>Id (100px)</th>
          <th>Name (200px)</th>
          <th>Description (auto)</th>
        </tr>
      </thead>
      <tr>
        <td>654</td>
        <td>name 1</td>
        <td>this is a description</td>
      </tr>
      <tr>
        <td>963</td>
        <td>long long long very long name 2</td>
        <td>this is the second description</td>
      </tr>
      <tr>
        <td>753</td>
        <td>name 3</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>224</td>
        <td>name 4</td>
        <td>this is the 4th description</td>
      </tr>
      <tr>
        <td>654</td>
        <td>name 1</td>
        <td>this is a description</td>
      </tr>
      <tr>
        <td>963</td>
        <td>long long long very long name 2</td>
        <td>this is the second description</td>
      </tr>
      <tr>
        <td>753</td>
        <td>name 3</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>224</td>
        <td>name 4</td>
        <td>this is the 4th description</td>
      </tr>
      <tr>
        <td>654</td>
        <td>name 1</td>
        <td>this is a description</td>
      </tr>
      <tr>
        <td>963</td>
        <td>long long long very long name 2</td>
        <td>this is the second description</td>
      </tr>
      <tr>
        <td>753</td>
        <td>name 3</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>224</td>
        <td>name 4</td>
        <td>this is the 4th description</td>
      </tr>
      <tr>
        <td>687</td>
        <td>name 5</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>354</td>
        <td>name 6</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>965</td>
        <td>name 7</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>456</td>
        <td>name 8</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>789</td>
        <td>name 9</td>
        <td>this is the third description</td>
      </tr>
    </table>
  </div>
</div>