3

如何使用 css 实现具有固定标题的水平和垂直可滚动的表格？

我发现这个Scrolling a div from an external div，但它是通过使用 Javascript/Jquery 实现的。有什么方法可以只使用 CSS 来实现它吗？

更新后的代码：

#div-table-content {
width: 100%;
overflow-x: auto;
}

table {
font-size: 12px;
white-space:nowrap;
overflow-x: scroll;
}

tbody {
height: 400px;
overflow-y: auto;
width: 100%;
display: block;
}

thead tr {
display: block;
width: 100%;
}
4

2 回答 2

3

首先，将您的<table>语义划分为内部的标题和内部<thead>的内容<tbody>。

然后，对于垂直滚动，给你的<tbody>和设置一个固定的高度overflow-y: auto和display: block。

对于水平滚动，我相信你必须用一个容器包裹你的整个表格（假设<div>并给它一个固定的宽度和overflow-x: auto.

jsFiddle Demo

于 2013-09-03T21:17:00.573 回答
0

您可以使用 css-grid 伪造表格（如果您不介意的话）。

.table {
  display: grid;
  width: 100px;
  height: 70px;
  overflow: auto;

  grid-auto-columns: max-content;
}

.head {
  position: sticky;
  top: 0;
  grid-row: 1;
  
  background-color: #fff;
  font-weight: bold;
}

比您将所有单元格放入单个元素中

  <div class="table">
    <div class="head">column 1</div>
    <div class="head">column 2</div>
    <div class="head">column 3</div>
    <div>data - column 1 - row 1</div>
    <div>data - column 2 - row 1</div>
    <div>data - column 3 - row 1</div>
    <div>data - column 1 - row 2</div>
    <div>data - column 2 - row 2</div>
    <div>data - column 3 - row 2</div>
    <div>data - column 1 - row 3</div>
    <div>data - column 2 - row 3</div>
    <div>data - column 3 - row 3</div>
  </div>

现在你可以一直看到两个滚动条；标题水平滚动但不垂直滚动。

于 2021-01-22T12:22:52.853 回答