固定了可滚动正文和标题的 Bootstrap 4 表 [英] Bootstrap 4 table with the scrollable body and header fixed

问题描述

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

 
<table className="table table-hover";id="作业表"><头><tr className="text-center"><th scope=col">Sr.No.</th><th scope="col">公司名称</th><th范围=col">技术</th><th范围=col">总简历</th><th scope=col">职位名称</th><th范围=col">总分</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) => {返回 (<td className="font-weight-bold">1</td><td className="font-weight-bold">ABCDED</td><td>软件开发人员</td><td className="font-weight-bold">17</td><td>5 年经验</td><td className="font-weight-bold">30</td><td className="font-weight-bold">30</td></tr>)})}</tbody>

在这里我使用了table-responsive class.我尝试使用此方法使该表可滚动:

tbody { height: 400px;溢出-y:滚动}

但这不起作用.

关于 td 内容的另一件事，如果它很大，其他行会受到影响.我怎样才能避免这种情况?

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

解决方案

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

table {显示:弹性；弹性流:列；宽度:100%；}头{弹性:0 0 自动；}身体{弹性:1 1 自动；显示:块；溢出-y:自动；溢出-x:隐藏；}tr{宽度:100%；显示:表；表格布局:固定；}

希望这会有所帮助

I am new to front-end-development. Here I have the 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>

In this I have used the table-responsive class. I have tried to make this table scrollable by using this:

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

But this is not working.

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

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

解决方案

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;
}

Hope this will help

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