具有固定可滚动主体和标题的Bootstrap 4表 [英] Bootstrap 4 table with the scrollable body and header fixed

问题描述

我对front-end-development还是陌生的.现在，这里有下表，

I am new to the front-end-development. Now, Here I have following table ,

  <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的内容的另一件事，如果td的内容很大，则其他行会受到影响.因此，如何避免这种情况?

One another thing about the content of the td if it is large the other rows gets affected . So, How can I avoid this scenario ?

感谢您的帮助.

[！[在此处输入图片描述] [3]] [3]

[![enter image description here][3]][3]

推荐答案

尝试使用flex，它应该与table-responsive兼容:

Try using flex, it should be compatible with 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;
}

希望这会有所帮助

这篇关于具有固定可滚动主体和标题的Bootstrap 4表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！