表头和脚可见，正文可滚动

Question

我正在尝试设置表格的样式（通过我无法更改的代码输出），以便表格的头部和底部始终可见，并且数据行的内容将是可滚动的。

最简单的方法是什么？

我尝试将正文设置为减去页眉 + 页脚的高度，但没有成功。

这是我的代码：

.outer, html, body {
  height: 100%;
}

table {
  border: 1px solid #000;
  width: 100%;
  height: calc(100% - 20px);
  text-align: center;
}
table thead {
  height: 100px;
  background-color: blue;
}
table tbody {
  overflow: scroll;
  height: calc(100% - 200px);
}
table tfoot {
  height: 100px;
  background-color: red;
}

<div class="outer">
  <table>
    <thead><tr>
      <th>col 1</th>
      <th>col 2</th>
      </tr></thead>
    <tbody>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      
    </tbody>
    <tfoot>
      <tr >
        <td colspan=2>footer</td>
      </tr>
    </tfoot>
  </table>
</div>

如何使表格 100% 高度和正文部分拉伸到可用大小并可以滚动？

Answer 1

仅使用 CSS，您可以将表格转换为 grid。这为您提供了极大的灵活性。

（全屏查看演示）

.outer, html, body {
  height: 100%;
}

table {
  border: 1px solid #000;
  text-align: center;
  display:grid;
  height:100%;
}
table thead {
  height: 40px;
  background-color: blue;
}
table tbody {
  overflow-y: auto;
}
table tfoot {
  height: 40px;
  background-color: red;
}

<div class="outer">
  <table>
    <thead><tr>
      <th>col 1</th>
      <th>col 2</th>
      </tr></thead>
    <tbody>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      <tr><td>a</td><td>b</td></tr>
      
    </tbody>
    <tfoot>
      <tr >
        <td colspan=2>footer</td>
      </tr>
    </tfoot>
  </table>
</div>

Answer 2

您好，这是您想要的示例

link

(function() {
 var fauxTable = document.getElementById("faux-table");
 var mainTable = document.getElementById("main-table");
 var clonedElement = mainTable.cloneNode(true);
 var clonedElement2 = mainTable.cloneNode(true);
 clonedElement.id = "";
 clonedElement2.id = "";
 fauxTable.appendChild(clonedElement);
 fauxTable.appendChild(clonedElement2);
})();

表格被克隆了两次，并且绝对放置在表格的顶部。第一个克隆隐藏了正文和页脚，第二个克隆隐藏了页眉和正文。表格分别位于 top:0 和 bottom:0。

为了避免滚动条占用空间的问题，绝对放置的表格位于一个已经有滚动条的 div 中，因此将考虑浏览器的不同滚动条宽度，或者实际上如果滚动条仅在需要时覆盖，如在 Mac 中系统。