固定可滚动正文和标题的 Bootstrap 4 表

Posted 2023-03-05

【中文标题】固定可滚动正文和标题的 Bootstrap 4 表

【英文标题】：Bootstrap 4 table with the scrollable body and header fixed

【发布时间】：2019-06-14 15:36:43

【问题描述】：

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

  <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]

【问题讨论】：

这个 codepen 比这里发布的答案更接近解决问题：codepen.io/bobmarksie/pen/VadxoK

【参考方案1】：

可以使用position: sticky 设置固定标题。

检查sample code。

这里设置主容器的高度。

.table-responsiveheight:400px;overflow:scroll; 

设置位置sticky到tr->th。

thead tr:nth-child(1) thbackground: white; position: sticky;top: 0;z-index: 10;

【讨论】：

如果您可以将每列中的所有内容都居中，则链接示例解决方案可以正常工作。您在上面显示的解决方案没有提到，并且如果不向 thead tr 元素添加以文本为中心的类，它将完全中断。

@Drew 我不明白为什么它会在没有以文本为中心的类的情况下中断。我刚刚测试过，它工作得很好@Balaji731 这个解决方案可能是这里最好的一个，因为它不会改变列的宽度。唯一的缺点是th的边框没有保留，和body一起向上滚动（我们可以在示例代码链接中看到）

你是最棒的！

【参考方案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;

希望这会有所帮助

【讨论】：

嘿，这已经奏效了，但问题是我的一个表数据有一个很大的内容，你可以说它超过 100 个字符，因此该特定行的高度变得很大。所以我怎么能有这个

@ganesh 嗨，我的解决方案有什么问题？

不，您的解决方案没有问题。它唯一的好处是，如果其中一行的 td 内容很大，那么该行的高度就会变得非常大。我的意思是它就像自动换行

@ganesh 所以你有什么期望，请给我更多细节以获得更多帮助。

不，其实我是新手，所以我不知道哪个是正确的方法。所以，你可以指导我一点。因为我得到的第一个解决方案也适用于宽度问题，就像其他人的宽度发生变化一样

【参考方案3】：

将display:block 添加到表中以解决此问题

tbodyheight: 400px; overflow-y: scroll;display:block;
th  position: sticky; top: 0; 

【讨论】：

这很棒，唯一的问题是，如果其中一行的 td 内容很大，那么其他行的宽度会有所不同

这仅在每个 th 和相应的 td 上指定宽度时才有效。例如这样的事情（对每一列重复并更改 col 目标#）：th:nth-child(1),td:nth-child(1) width: 50px;。这不是一个好的解决方案

在 bootstrap 4 上完美运行，在模态框中有一个表格，用 chrome 查看。

【参考方案4】：

使用位置：粘在 和顶部：0

th 
  background: white;
  position: sticky;
  top: 0; /* Don't forget this, required for the stickiness */

完整的例子可以在这里找到： https://css-tricks.com/position-sticky-and-table-headers/