javascript - Bootstrap 4 表格，可滚动主体和标题固定

Question

我是前端开发的新手。这里我有下表:

  <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 设置固定标题。

检查 sample code .

这里设置主容器的高度。

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

设置sticky到第tr->th.

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