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

【问题标题】：css: table scrollable both horizontally and vertically with fixed headercss：表格可水平和垂直滚动，带有固定标题
【发布时间】：2022-03-31 03:57:26
【问题描述】：

如何使用 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%;
}

【问题讨论】：

类似this?

标签： html css html-table

【解决方案1】：

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

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

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

jsFiddle Demo

【讨论】：

但是水平滚动条呢？
您希望水平滚动的行为如何？标题也水平滚动？您需要固定的第一列吗？
是的，标题也需要水平滚动，我不需要固定的第一列
@JoshC 我更新了我的css代码，结果是：div可以用header水平滚动，tbody可以垂直和水平滚动，tbody的宽度等于标题的第一列。
@Cacheing 我已经添加了一个 jsFiddle，它的工作所需的更改最少。

【解决方案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>

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

【讨论】：

【解决方案3】：

仅使用 css 的粘性列标题的水平和垂直滚动可以通过以下方式完成。

带有overflow: scroll 的容器div
thead 与 position: sticky 和 inset-block-start: 0;

下面的完整示例：

.container {
  overflow: scroll;
  height: 180px;
  width: 300px;
}

table {
  border-collapse: collapse;
}

table th,
table td {
  max-width: 300px;
  padding: 8px 16px;
  border: 1px solid #ddd;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

table thead {
  position: sticky;
  inset-block-start: 0;
  background-color: #ddd;
}

<div class="container">
  <table>
    <thead>
      <tr>
        <th>Fruits</th>
        <th>Nuts</th>
        <th>Vegetables</th>
        <th>Meats</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Apple</td>
        <td>Peanut</td>
        <td>Carrot</td>
        <td>Chicken</td>
      </tr>
      <tr>
        <td>Banana</td>
        <td>Pecan</td>
        <td>Potato</td>
        <td>Pork</td>
      </tr>
      <tr>
        <td>Cherry</td>
        <td>Cashew</td>
        <td>Tomato</td>
        <td>Beef</td>
      </tr>
      <tr>
        <td>Grape</td>
        <td>Almond</td>
        <td>Cabbage</td>
        <td>Lamb</td>
      </tr>
      <tr>
        <td>Kiwi</td>
        <td>Brazil Nut</td>
        <td>Onion</td>
        <td>Chicken</td>
      </tr>
      <tr>
        <td>Lemon</td>
        <td>Hazelnut</td>
        <td>Cucumber</td>
        <td>Fish</td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：