如何修复我的表格的标题，使它们不会滚动答案

【问题标题】：How to fix the headers of my table so they do not scroll如何修复我的表格的标题，使它们不会滚动
【发布时间】：2019-04-06 09:24:49
【问题描述】：

我正在尝试修复表格的标题，使其不会滚动但保持固定。

我搜索了一些较旧的 SO 线程，试图找到修复可滚动表标题的解决方案。我对 bootstrap 和 React 还很陌生，我相信我已经很接近了。我在这里问这个问题是为了找到特定于我的代码的答案。

我在反应组件中的表

    <div>
      <div className="tablediv">
      <div className="table-wrapper-scroll-y my-custom-scrollbar">
        <table className="table table-hover table-striped table-light">
          <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Date</th>
            <th scope="col">Value: USD</th>
          </tr>
        </thead>
        <tbody>
          {priceAndDateArray.slice(0).reverse().map((item, i) => (
              <tr key={i}>
                <th scope="row">{i+1}</th>
                <td>{item.date}</td>
                <td>{item.price}</td>
              </tr>
          ))}
        </tbody>
      </table>
      </div>
      </div>
    </div>

我与表格相关的 css

.tablediv {
  flex-wrap: wrap;
  align-content: space-evenly;
  padding: 5%;
  justify-content: center
}

.tablediv tr {
  cursor: pointer;
  cursor: hand;
}

.my-custom-scrollbar {
  position: relative;
  height: 400px;
  overflow: auto;
}
.table-wrapper-scroll-y {
  display: block;
}

预期结果是表的顶部标题（#、日期、值：美元）要固定到位。实际结果是它们随表格滚动。

【问题讨论】：

标签： css reactjs bootstrap-4 fixed-header-tables

【解决方案1】：

尝试添加这个。

.tablediv {
    flex-wrap: wrap;
    align-content: space-evenly;
    padding: 5%;
    justify-content: center;
    position: fixed;
    top: 0;
}

【讨论】：

不幸的是，这并没有奏效，但它有一个非常有趣的效果。

【解决方案2】：

你想要css position:sticky 这将保留标题，直到内容滚动过去。这里是info and examples

虽然你的 css 看起来像这样

thead {
 position: sticky;
 top:0; //or whatever offset you want
 z-index: 100; // make sure it stacks higher than other stuff on the page
}

【讨论】：