table 固定行 如何解决边框不会跟随吸顶

在HTML表格（table）中，如果你想要固定某一行并保持其边框即使在滚动时也不消失或错位，你可以使用CSS定位技术。一种常见的做法是结合`position: sticky`属性和`:sticky`伪类来实现。这里是一个简单的示例：

<style>
  .fixed-row {
    position: -webkit-sticky; /* 对于Webkit浏览器（如Chrome、Safari） */
    position: sticky;
    top: 0; /* 顶部固定 */
    background-color: #f5f5f5; /* 可选颜色，增加视觉区分度 */
    border-bottom: 1px solid black; /* 边框样式 */
    z-index: 1; /* 提高层级，防止遮挡其他内容 */
  }

  table {
    width: 100%;
    height: auto;
    overflow-x: auto; /* 允许水平滚动 */
  }
</style>

<table>
  <thead class="fixed-row">
    <tr>
      <th>标题1</th>
      <th>标题2</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格数据 -->
    <tr>
      <td>内容1</td>
      <td>内容2</td>
    </tr>
    <!-- 更多行... -->
  </tbody>
</table>

在这个例子中，`.fixed-row`类的表头将在页面顶部保持固定，并且其底部边框会随着页面滚动而显示，直到离开可视区域。记得检查你的目标浏览器兼容性，因为`position: sticky`在一些旧版本的浏览器中可能不支持。