table固定表头

作者：System 时间：2024年08月15日分类：所有,html5 字数：982

要实现固定表头，可以使用CSS的position: sticky属性。这个属性可以使元素在滚动时保持在指定的位置。

下面是一个简单的HTML和CSS示例，展示了如何固定表头：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Table Header</title>
<style>
  thead th {
    position: sticky;
    top: 0;
    background-color: #f9f9f9;
  }
 
  table {
    border-collapse: collapse;
    width: 100%;
  }
 
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
</style>
</head>
<body>
 
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格内容 -->
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <!-- 更多行... -->
  </tbody>
</table>
 
</body>
</html>

在这个例子中，thead th选择器设置了position: sticky和top: 0，这样表头就会在滚动时保持在顶部。background-color用于设置当表头固定时的背景色。table和th, td样式是为了给表格提供基本的样式。

table固定表头

评论已关闭

推荐阅读