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中需要时被覆盖系统。

头和脚可见的桌子，身体可滚动

2 个答案: