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

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

我发现了这一点，但它是通过使用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%;
}

---

首先，在语义上将

划分为

中的标题和

中的内容

然后，对于垂直滚动，为

指定一个固定高度，并设置

溢出-y:auto

和

显示：block

对于水平滚动，我相信您必须用容器包装整个表（比如说

，并给它一个固定的宽度和

溢出-x:auto

）

---

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

然后将所有单元格放入单个元素中

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

第1栏
第2栏
第3栏
数据-第1列-第1行
数据-第2列-第1行
数据-第3列-第1行
数据-第1列-第2行
数据-第2列-第2行
数据-第3列-第2行
数据-第1列-第3行
数据-第2列-第3行
数据-第3列-第3行

---

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

但是水平滚动条呢？你希望水平滚动条表现如何？标题也在水平滚动？你需要固定的第一列还是什么？是的，标题也需要水平滚动，我不需要固定首字母-column@JoshC我更新了我的css代码，结果是：div可以与标题水平滚动，tbody可以垂直和水平滚动，tbody的宽度等于标题第一列的大小。@缓存我添加了一个jsFiddle，其中包含了工作所需的最小更改。Somet兴兴

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