我怎样才能保持这个表头固定？答案

【问题标题】：How can I keep this table header fixed?我怎样才能保持这个表头固定？
【发布时间】：2026-02-14 02:30:01
【问题描述】：

我想保持这个表头固定，问题是当我将thead 位置设置为fixed 时，它会失去它的大小。 基本上，我只是想让thead 不随桌子的其余部分移动，但要保持其原始形状和大小。

提前致谢。

table {
  margin: 100 0 100 0;
  width: 100%;
}
th,
td,
table {
  /*word-wrap: break-word;*/
  border: 1px solid black;
  border-radius: 3px;
}
body {
  overflow: hidden;
}
.scrollable {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}
thead {
  position: fixed;
  width: 100%;
}
.myHead {
  width: auto;
  border: 11px solid blue;
}

<!DOCTYPE html>
<html>

<head>
  <title>MyTable</title>
</head>

<body>
  <div class="scrollable">
    <table>

      <thead>

        <tr class="myHead">
          <th class="header" align="center">Title</th>
          <th class="header" align="center">Title</th>
        </tr>

      </thead>

      <tbody>
        <tr>
          <td align="center">id</td>
          <td align="center">id</td>
        </tr>
        <tr>
          <td align="center">id</td>
          <td align="center">id</td>
        </tr>
        <tr>
          <td align="center">id</td>
          <td align="center">id</td>
        </tr>
        <tr>
          <td align="center">id</td>
          <td align="center">id</td>
        </tr>
        <tr>
          <td align="center">id</td>
          <td align="center">id</td>
        </tr>
        <tr>
          <td align="center">id</td>
          <td align="center">id</td>
        </tr>
        <tr>
          <td align="center">id</td>
          <td align="center">id</td>
        </tr>
        <tr>
          <td align="center">id</td>
          <td align="center">id</td>
        </tr>
        <tr>
          <td align="center">id</td>
          <td align="center">id</td>
        </tr>
        <tr>
          <td align="center">id</td>
          <td align="center">id</td>
        </tr>
        <tr>
          <td align="center">id</td>
          <td align="center">id</td>
        </tr>

      </tbody>
    </table>
  </div>
  <div>----------------200px--------------></div>
</body>

</html>

【问题讨论】：

看看这个：tympanus.net/codrops/2014/01/09/sticky-table-headers-columns
@boszlo 我已经检查过了，但它比我预期的要多，我不想使用超过 1000 行（清理后）来创建一个简单的表。跨度>
当然，还有一个更简单的选择：*.com/questions/11499973/…

标签： javascript jquery html css position

【解决方案1】：

查看这个问题，因为它提供了一些可以帮助您解决问题的资源： Freeze the top row for an html table only (Fixed Table Header Scrolling)

（无法发表评论，因为我没有所需的声誉）

【讨论】：