Question

如何使用css实现一个水平和垂直可滚动且具有固定标头的表？

我发现了这个Scrolling a div from an outer 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%;
}

Answer 1

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

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

对于水平滚动，我相信你必须用容器包裹整个桌子（比方说<div>并给它一个固定的宽度和overflow-x: auto。

jsFiddle Demo

Answer 2

你可以用 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>

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

css：表格可以水平和垂直滚动，带有固定标题

2 个答案: