将第一个 tr 设置为 fixed 而不丢失宽度

如何解决将第一个 tr 设置为 fixed 而不丢失宽度

这是我的 fiddlejs：[https://jsfiddle.net/uj8gbeL1/]

我正在尝试修复表格的第一行，但是当我尝试设置样式 postion:fixed 时，该行的宽度不同

如何在不为每个元素设置“静态”宽度的情况下解决此问题？

解决方法

您将使用以下方法解决此问题： <tr class="globalTr" style="position:sticky;top:0;z-index:1">

或者更好，把它放在css中：

.globalTr:first-child {
    position: sticky;
    top: 0;
    z-index: 1; 
}

但是，您的代码可以更好地格式化。
这是一个例子，请阅读html中的评论：

div {
  width: 100%;
  height: 200px;
  overflow: auto;
}

table {
  font-family: sans-serif;
  border-collapse: collapse;
}

thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

th,td {
  border: 1px solid #369;
  padding: 10px;
}

th {
  background: #369;
  color: white;
}

td {
  background: aliceblue;
}

<div>
  <table>
    <thead>
      <tr>
        <th>Heading1</th> <!-- th is for headings -->
        <th>Heading2</th>
      </tr>
    </thead>
    <!-- use thead and tbody -->
    <tbody>
      <tr>
        <td>Content</td> <!-- td is for cells -->
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
    </tbody>
  </table>
</div>

,

使用 CSS position:sticky;top:0; 而不是 position:fixed;。