Question

我正在尝试修复表格的标题，以使它不会滚动，而是保持固定位置。

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

我的表在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;
}

预期结果是要固定的表格的顶部标题（＃，日期，值：USD）。实际结果是它们与表格一起滚动。

Answer 1

尝试添加它。

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

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

如何修复表格标题，使其不滚动

2 个答案: