滚动顶部带有固定标题的表格[重复]

Question

我正在尝试制作一个表格，其中 thead 不滚动但 tbody 滚动。 我使用百分比和固定宽度来决定每个单元格有多大，我希望我的百分比 td 都具有相同的大小并与标题标题对齐。

我也有一个JSFiddle 来显示问题。

.main-wrapper {
  overflow-y: scroll;
  height: 300px;
  border: 1px solid blue;
}

.content-wrapper {
  height: 500px;
}

.table {
  width: 100%;
  table-layout: fixed;
}

.table.content {
  margin-bottom: 15px;
}

.header {
  position: fixed;
}

.cell {
  border: 1px solid red;
  width: 100%;
  height: 15px;
}

.medium {
  width: 100px;
}

.small {
  width: 50px;
}

<div class="main-wrapper">
  <div class="content-wrapper">
    <table class="table header">
      <thead>
        <tr>
          <th class="cell medium">A</th>
          <th class="cell small">B</th>
          <th class="cell">C</th>
          <th class="cell">D</th>
          <th class="cell">E</th>
          <th class="cell">F</th>
          <th class="cell">G</th>
          <th class="cell">H</th>
          <th class="cell">I</th>
          <th class="cell small">J</th>
        </tr>
      </thead>
    </table>
    <table class="table content">
      <tbody>
        <tr>
          <td class="cell medium">A</td>
          <td class="cell small">B</td>
          <td class="cell">C</td>
          <td class="cell">D</td>
          <td class="cell">E</td>
          <td class="cell">F</td>
          <td class="cell">G</td>
          <td class="cell">H</td>
          <td class="cell">I</td>
          <td class="cell small">J</td>
        </tr>
        <tr>
          <td class="cell medium">A</td>
          <td class="cell small">B</td>
          <td class="cell">C</td>
          <td class="cell">D</td>
          <td class="cell">E</td>
          <td class="cell">F</td>
          <td class="cell">G</td>
          <td class="cell">H</td>
          <td class="cell">I</td>
          <td class="cell small">J</td>
        </tr>
        <tr>
          <td class="cell medium">A</td>
          <td class="cell small">B</td>
          <td class="cell">C</td>
          <td class="cell">D</td>
          <td class="cell">E</td>
          <td class="cell">F</td>
          <td class="cell">G</td>
          <td class="cell">H</td>
          <td class="cell">I</td>
          <td class="cell small">J</td>
        </tr>
        <tr>
          <td class="cell medium">A</td>
          <td class="cell small">B</td>
          <td class="cell">C</td>
          <td class="cell">D</td>
          <td class="cell">E</td>
          <td class="cell">F</td>
          <td class="cell">G</td>
          <td class="cell">H</td>
          <td class="cell">I</td>
          <td class="cell small">J</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

如果我删除position: fixed，它会按我的意愿工作，但线程不会停留在顶部。

Answer 1

我认为仅靠 CSS 是不可能的。

前段时间我也尝试过，但没有找到解决方案。

接近它的唯一方法（我认为）是通过 javascript 而不是表格而是 Div。

幸运的是，有一些插件可以为我们做到这一点，例如 fixedheadertable

Answer 2

如果您不在表格中使用<thead> 标记，您可以使用position:sticky 属性来保持单元格宽度，同时不将标题单元格从html 流中取出（固定位置）。

这样：

.main-wrapper {
  overflow-y: scroll;
  height: 300px;
  border: 1px solid blue;
}

.content-wrapper {
  height: 500px;
}

.table {
  width: 100%;
  table-layout: fixed;
}

.table.content {
  margin-bottom: 15px;
}

th{
  position: sticky;
  top:0px;
}

.cell {
  border: 1px solid red;
  width: 100%;
  height: 15px;
}

.medium {
  width: 100px;
}

.small { 
  width: 50px;
}

<div class="main-wrapper">
  <div class="content-wrapper">
    <table class="table header">       
      <tbody>
        <tr>
          <th class="cell medium">A</th>
          <th class="cell small">B</th>
          <th class="cell">C</th>
          <th class="cell">D</th>
          <th class="cell">E</th>
          <th class="cell">F</th>
          <th class="cell">G</th>
          <th class="cell">H</th>
          <th class="cell">I</th>
          <th class="cell small">J</th>
        </tr>
        <tr>
          <td class="cell medium">A</td>
          <td class="cell small">B</td>
          <td class="cell">C</td>
          <td class="cell">D</td>
          <td class="cell">E</td>
          <td class="cell">F</td>
          <td class="cell">G</td>
          <td class="cell">H</td>
          <td class="cell">I</td>
          <td class="cell small">J</td>
        </tr>
        <tr>
          <td class="cell medium">A</td>
          <td class="cell small">B</td>
          <td class="cell">C</td>
          <td class="cell">D</td>
          <td class="cell">E</td>
          <td class="cell">F</td>
          <td class="cell">G</td>
          <td class="cell">H</td>
          <td class="cell">I</td>
          <td class="cell small">J</td>
        </tr>
        <tr>
          <td class="cell medium">A</td>
          <td class="cell small">B</td>
          <td class="cell">C</td>
          <td class="cell">D</td>
          <td class="cell">E</td>
          <td class="cell">F</td>
          <td class="cell">G</td>
          <td class="cell">H</td>
          <td class="cell">I</td>
          <td class="cell small">J</td>
        </tr>
        <tr>
          <td class="cell medium">A</td>
          <td class="cell small">B</td>
          <td class="cell">C</td>
          <td class="cell">D</td>
          <td class="cell">E</td>
          <td class="cell">F</td>
          <td class="cell">G</td>
          <td class="cell">H</td>
          <td class="cell">I</td>
          <td class="cell small">J</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>