如何使css表的头部变粘答案

【问题标题】：How to make head of css table sticky如何使css表的头部变粘
【发布时间】：2019-09-04 16:06:19
【问题描述】：

我有一个 css 表，前 2 列已经是粘性的，一切正常，但我希望表头也具有粘性。我就是无法让它工作。

我已经尝试为每个使用一个类：位置：粘性，顶部：0。

此代码使前 2 列具有粘性

table {
    table-layout: fixed;
    width: 100%;
}
.fixed{
    position: sticky;
    left: 0;
}
.fixed2 {
    position: sticky;
    left: 120px;
}

我想要的也是粘性的。

任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： css css-tables

【解决方案1】：

给table标签赋予table-fixed类并试试这个：

.table-fixed{
  width: 100%;
  tbody{
    height:200px;
    overflow-y:auto;
    width: 100%;
    }
  thead,tbody,tr,td,th{
    display:block;
  }
  tbody{
    td{
      float:left;
    }
  }
  thead {
    tr{
      th{
        float:left;
      }
    }
  }
}

【讨论】：

【解决方案2】：

css

thead th { position: sticky; top: 0; }

html

<table class="table">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
        </tbody>
    </table>

【讨论】：