Question

我希望保持此表格标题不变，问题是当我将thead位置设置为fixed时，它会失去其大小。 基本上，我只是想让thead与其他表一起移动，但原始形状和大小。

提前致谢。

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

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

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

如何保持此表头固定？

1 个答案: