Таблица Bootstrap 4 с прокручиваемым телом и фиксированным заголовком

Question

Я новичок в front-end-development.Теперь, у меня есть следующая таблица,

  <div className="table-responsive">
    <table className="table table-hover" id="job-table">
      <thead>
        <tr className="text-center">
          <th scope="col">Sr.No.</th>
          <th scope="col">Company Name</th>
          <th scope="col">Technology</th>
          <th scope="col">Total Resumes</th>
          <th scope="col">Job Title</th>
          <th scope="col">Total Score</th>
          <th scope="col">Average Score</th>
        </tr>
      </thead>
      <tbody className="text-center">
        {this.props.list && this.props.list.content && this.props.list.content.length > 0 && this.props.list.content.map((item, key) => {
          return (
            <tr key={key}>
              <td className="font-weight-bold">1</td>
              <td className="font-weight-bold">ABCDED</td>
              <td>Software Developer</td>
              <td className="font-weight-bold">17</td>
              <td>5 years experience</td>
              <td className="font-weight-bold">30</td>
              <td className="font-weight-bold">30</td>
            </tr>
          )
        })}
      </tbody>
    </table>
  </div>

Теперь, в этом я использовал table-responsive class.

Теперь я попытался сделать эту таблицу прокручиваемой с помощью

tbody { height: 400px; overflow-y: scroll }

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

Еще одна вещь, касающаяся содержимого td, если оно велико, другие строки будут затронуты.Итак, как я могу избежать этого сценария?

Спасибо за помощь.

[! [Введите описание изображения здесь] [3]] [3]

Answer 1

Можно установить фиксированный заголовок с помощью position: sticky.

Проверьте образец кода .

Здесь задайте высоту основного контейнера.

.table-responsive{height:400px;overflow:scroll;} 

Установите положение, прикрепленное к tr-> th.

thead tr:nth-child(1) th{background: white; position: sticky;top: 0;z-index: 10;}

Answer 2

Попробуйте использовать flex, он должен быть совместим с table-responsive:

table {
    display: flex;
    flex-flow: column;
    width: 100%;
}

thead {
    flex: 0 0 auto;
}

tbody {
    flex: 1 1 auto;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
}

tr {
    width: 100%;
    display: table;
    table-layout: fixed;
}

Надеюсь, это поможет

Answer 3

добавьте display:block в таблицу, чтобы исправить это

tbody{height: 400px; overflow-y: scroll;display:block;}
th { position: sticky; top: 0; }