css - 表格是水平滚动的，但粘性页眉和页脚不是

Question

我目前正在处理一个包含 500 多条记录并且有很多标题的表格。我已经设法完成大部分工作，但问题是我似乎无法让页眉和页脚随表格水平滚动以及成为粘性页眉/页脚。

本质上:我希望页眉/页脚在垂直方向而不是水平方向是粘性的。这仅在 CSS 中可行吗？

这是一个 jsFiddle 的链接，显示了我遇到的问题:https://jsfiddle.net/j8rd9jpj/14/

我发现了一些与我的问题类似的问题/解决方案，但它们要么没有解决，要么问题并不真正适用于我的情况:

Horizontal scrolling on table with fixed header

Fixed header table with horizontal scrollbar and vertical scrollbar on

我正在尝试仅使用 CSS 解决此问题，表格 HTML 已修复，我无法为页脚或页眉添加额外的 div。

我在想问题是滚动条是在表内还是在表外，但我不确定如何解决这个问题

我的 HTML:

<div id="main">
  <table id="tableData">
    <thead>
      <tr>
        <th>Something 1</th>
        <th>Something 2</th>
        <th>Something 3</th>
        <th>Something 4</th>
        <th>Something 5</th>
        <th>Something 6</th>
        <th>Something 7</th>
        <th>Something 8</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
        ....
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Something 1</th>
        <th>Something 2</th>
        <th>Something 3</th>
        <th>Something 4</th>
        <th>Something 5</th>
        <th>Something 6</th>
        <th>Something 7</th>
        <th>Something 8</th>
      </tr>
    </tfoot>
  </table>
</div>

我的 CSS:

body {
  overflow: hidden;
}

#main {
  overflow: scroll;
  display: table;
  max-height: 200px;
}

#tableData {
  table-layout: fixed;
  margin: auto;
  width: 100%;
  overflow-x: auto;
}

#tableData>tbody>tr>td {
  width: 120px;
  padding: 1px 8px 8px 1px;
  word-wrap: break-word;
}

#tableData thead,
#tableData tfoot {
  display: table;
  width: 100%;
}

#tableData tbody {
  height: 100px;
  overflow: auto;
  display: block;
  width: 100%;
}

#tableData tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

#tableData th {
  min-width: 120px;
}

谢谢!

Answer 1

#tableData {
    table-layout:fixed;
    margin:auto;
    width:100%;
    overflow-x:auto;
    max-height: 200px;
    display: block;
}

#tableData > tbody > tr > td {
    width: 120px;
    padding: 1px 8px 8px 1px;
    word-wrap:break-word;
}

#tableData thead, #tableData tfoot {
    display:table;
    width:100%;
}

#tableData tbody {
  overflow: auto;
  display: block;
  width: 100%;
}

#tableData tbody tr{
  display: table;
  width: 100%;
  table-layout: fixed;
}

#tableData th {
    min-width: 120px;
}