Как сделать так, чтобы tbody имел вертикальную прокрутку в таблице с динамической шириной столбцов c

Question

У меня есть таблица на странице, где мне нужно реализовать вертикальную прокрутку только для части tbody таблицы. В моей таблице есть столбцы с динамической шириной c, горизонтальная прокрутка реализована, если увеличение ширины столбца приводит к переполнению таблицы. Я хочу, чтобы прокручивал только тело таблицы при вертикальном переполнении, но чтобы заголовок таблицы оставался видимым . То, что я реализовал, прокручивает всю таблицу вертикально

Ниже приведен мой код на данный момент. Он содержит фиктивные данные, поскольку я не могу опубликовать фактический код, но структура такая же ( jsfiddle link ): HTML

<div class="container">
  <table>
    <thead>
      <tr>
        <th>Title 1</th>
        <th>Name</th>
        <th>Address</th>
        <th>Col4</th>
        <th>Col5</th>
        <th>Col6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Title 2</td>
        <td>Jane Doe</td>
        <td>dfss</td>
        <td>sdffsffsfd</td>
        <td>sfsfs</td>
        <td>sfsff</td>
      </tr>
      <tr>
        <td>Title 3</td>
        <td>John Doe</td>
        <td>sasas</td>
        <td>eeeee</td>
        <td>eEe</td>
        <td>sfff</td>
      </tr>
      <tr>
        <td>Title 4 is a long title</td>
        <td>Name1</td>
        <td>dfss</td>
        <td>sdffsffsfd</td>
        <td>sfsfs</td>
        <td>sfsff</td>
      </tr>
      <tr>
        <td>Title 5 is shorter</td>
        <td>Name 2</td>
        <td>dfsf</td>
        <td>sdfsf</td>
        <td>dfsf</td>
        <td>sdfsf</td>
      </tr>
      <tr>
        <td>Title 6</td>
        <td>Name 3</td>
        <td>sasas</td>
        <td>eeeee</td>
        <td>eEe</td>
        <td>sfff</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

th,
td {
  text-align: left;
  padding: 5px;
  outline: solid 0.5px;
}

table {
  table-layout: auto;
  width: 100%;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: scroll;
  height: 100px;
  display: block;
}

.container {
  width: 300px;
}

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

Все другие решения, даже те, которые используют вложенную таблицу, используют столбец с фиксированной шириной, и те, которые не используют js / jQuery, которые я бы предпочел не использовать, если только это не абсолютный, последний вариант. Может кто-нибудь предложить что-нибудь?

Answer 1

Чтобы сделать прокрутку <tbody>:

tbody{
  display: block;
  height: 100px;
  width: 100%;
  overflow-y: scroll;
}

И если вы хотите, чтобы <thead> оставался неподвижным, пока тело прокручивается:

thead tr{
  display: block
}

Answer 2

Я не уверен, отвечает ли это на ваш вопрос.

Если на оси y всегда имеется прокрутка, а на оси x - только прокрутка, если слишком много информации

CSS

   overflow-x:auto;
   overflow-y:scroll;