仅使用 CSS 修复了 <thead> 中的表头 [重复]答案

【问题标题】：Fixed table header in <thead> using only CSS [duplicate]仅使用 CSS 修复了 <thead> 中的表头 [重复]
【发布时间】：2017-09-23 08:03:00
【问题描述】：

我正在尝试在不使用 Javascript 的情况下为 thead 获取一个固定的表头。这是我的桌子的基本设置：

<table>
   <thead>
     <tr>
       <th>...</th>
       <th>...</th>
       <th>...</th>
    <tr>
   </thead>
   <tbody>
       ...
   </tbody>
</table>

我尝试使用 css，但没有成功。我有一个固定的标题，但它的宽度很小而且不可调节。

.thead {
    position:fixed;
    top:0;
    width:100%;
}

【问题讨论】：

thead 不是一个类。消除。在 css 中插入之前

标签： css html-table css-position tableheader

【解决方案1】：

试试这个

<table>
   <thead class="fixedthead">
     <tr>
       <th>...</th>
       <th>...</th>
       <th>...</th>
    <tr>
   </thead>
   <tbody>
       ...
   </tbody>
</table>

.fixedthead{position:fixed; top:0px;}

【讨论】：

当使用 '0' 时，不应该存在一个单位（所以在这种情况下，它应该只是 top: 0;），除此之外，这应该可以工作。