固定表头的表格滚动

Question

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

我还有一个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，它会按照我的要求工作，但是主题不会停留在顶部。

- DannyBiezen

---

请尝试访问此链接 https://jsfiddle.net/96guwhfe/6/ - Krish

但是你尝试过这个、这个、这个、这个和这个吗？ - caramba

Answer 1

我认为仅通过CSS是不可能的。

我以前也尝试过，并且搜索了解决方案，但没有成功。

我认为唯一的方法是使用JavaScript而不是表格，而是使用Divs。

幸运的是，有像fixedheadertable这样的插件可以为我们完成它。

- bitifet

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>

- Alvaro Menéndez