Question

我正在尝试冻结html表的标题列。

我在我的应用程序中使用了一个预定义的表组件（我必须按照我的团队使用它），在其中我需要冻结标题。

我知道如果我应用position：sticky;它会起作用。和top：0;对于具有thead标签的表，但在我的情况下，仅使用tbody创建表头，如下面的代码片段所示。网格始终维护着100多个必须滚动的行。

您的建议将最有帮助。

y*=1

x*=x

谢谢。

Answer 1

在position:sticky选择器上添加tbody:first-child tr td。

tbody:first-child tr td{
    background-color:lightgray;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

table {
    border-collapse: collapse;
    width: 100%;
}

td {
    text-align: left;
    padding: 8px;
}

tbody:first-child tr td{
    background-color:lightgray;
  position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h2>Colored Table Header</h2>

 <table>
 <tbody>
   <tr>
     <td >ID</td>
     <td>Name</td>
     <td>Description</td>
     <td>Value</td>
     <td>Units</td>
     <td>Directions</td>
   </tr>
 </tbody>
<tbody>
   <tr>
     <td >1</td>
     <td>name1</td>
     <td>Description1</td>
     <td>Value1</td>
     <td>Unit1</td>
     <td>Direction1</td>
   </tr>
 </tbody>
 <tbody>
   <tr>
     <td >2</td>
     <td>name2</td>
     <td>Description2</td>
     <td>Value2</td>
     <td>Unit2</td>
     <td>Direction1</td>
   </tr>
 </tbody>
 <tbody>
   <tr>
     <td >3</td>
     <td>name3</td>
     <td>Description3</td>
     <td>Value3</td>
     <td>Unit3</td>
     <td>Direction3</td>
   </tr>
 </tbody>
 <tbody>
   <tr>
     <td >4</td>
     <td>name4</td>
     <td>Description4</td>
     <td>Value4</td>
     <td>Unit4</td>
     <td>Direction4</td>
   </tr>
 </tbody><tbody>
   <tr>
     <td >1</td>
     <td>name1</td>
     <td>Description1</td>
     <td>Value1</td>
     <td>Unit1</td>
     <td>Direction1</td>
   </tr>
 </tbody>
 <tbody>
   <tr>
     <td >2</td>
     <td>name2</td>
     <td>Description2</td>
     <td>Value2</td>
     <td>Unit2</td>
     <td>Direction1</td>
   </tr>
 </tbody>
 <tbody>
   <tr>
     <td >3</td>
     <td>name3</td>
     <td>Description3</td>
     <td>Value3</td>
     <td>Unit3</td>
     <td>Direction3</td>
   </tr>
 </tbody>
 <tbody>
   <tr>
     <td >4</td>
     <td>name4</td>
     <td>Description4</td>
     <td>Value4</td>
     <td>Unit4</td>
     <td>Direction4</td>
   </tr>
 </tbody><tbody>
   <tr>
     <td >1</td>
     <td>name1</td>
     <td>Description1</td>
     <td>Value1</td>
     <td>Unit1</td>
     <td>Direction1</td>
   </tr>
 </tbody>
 <tbody>
   <tr>
     <td >2</td>
     <td>name2</td>
     <td>Description2</td>
     <td>Value2</td>
     <td>Unit2</td>
     <td>Direction1</td>
   </tr>
 </tbody>
 <tbody>
   <tr>
     <td >3</td>
     <td>name3</td>
     <td>Description3</td>
     <td>Value3</td>
     <td>Unit3</td>
     <td>Direction3</td>
   </tr>
 </tbody>
 <tbody>
   <tr>
     <td >4</td>
     <td>name4</td>
     <td>Description4</td>
     <td>Value4</td>
     <td>Unit4</td>
     <td>Direction4</td>
   </tr>
 </tbody>
 <tbody>
   <tr>
     <td >1</td>
     <td>name1</td>
     <td>Description1</td>
     <td>Value1</td>
     <td>Unit1</td>
     <td>Direction1</td>
   </tr>
 </tbody>
 <tbody>
   <tr>
     <td >2</td>
     <td>name2</td>
     <td>Description2</td>
     <td>Value2</td>
     <td>Unit2</td>
     <td>Direction1</td>
   </tr>
 </tbody>
 <tbody>
   <tr>
     <td >3</td>
     <td>name3</td>
     <td>Description3</td>
     <td>Value3</td>
     <td>Unit3</td>
     <td>Direction3</td>
   </tr>
 </tbody>
 <tbody>
   <tr>
     <td >4</td>
     <td>name4</td>
     <td>Description4</td>
     <td>Value4</td>
     <td>Unit4</td>
     <td>Direction4</td>
   </tr>
 </tbody>
 <tbody>
   <tr>
     <td >1</td>
     <td>name1</td>
     <td>Description1</td>
     <td>Value1</td>
     <td>Unit1</td>
     <td>Direction1</td>
   </tr>
 </tbody>
 <tbody>
   <tr>
     <td >2</td>
     <td>name2</td>
     <td>Description2</td>
     <td>Value2</td>
     <td>Unit2</td>
     <td>Direction1</td>
   </tr>
 </tbody>
 <tbody>
   <tr>
     <td >3</td>
     <td>name3</td>
     <td>Description3</td>
     <td>Value3</td>
     <td>Unit3</td>
     <td>Direction3</td>
   </tr>
 </tbody>
 <tbody>
   <tr>
     <td >4</td>
     <td>name4</td>
     <td>Description4</td>
     <td>Value4</td>
     <td>Unit4</td>
     <td>Direction4</td>
   </tr>
 </tbody>
</table>

</body>
</html>

使用CSS冻结HTML表格的第一行

1 个答案: