CSS四大优势

CSS是前端开发必不可少的技能之一，它能够对网页的样式进行控制。其中，表格是网站开发中经常用到的元素之一。而当表格的行和列过多时，会出现滚动条，这时候如果能够固定表头不滚动就能让用户更好地浏览表格内容。

实现固定表头不滚动一般分为两种方案，即JavaScript和CSS方式。这里介绍CSS方式实现固定表头不滚动的方法。

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    overflow-y: auto;
}

thead,tbody {
    display: block;
}

thead {
    background-color: #eee;
    position: sticky;
    top: 0;
}

td,th {
    border: 1px solid #ccc;
    text-align: center;
    padding: 5px;
    width: 150px;
}

以上代码中：

• 设置table标签的宽度为100%，利用table-layout:fixed设置表格布局为定宽
• 将thead和tbody标签设置为块级元素，使得thead和tbody两者都可以设置height
• 将thead标签设置为position:sticky并置顶，使固定表头不滚动
• 设置td和th标签的样式，让表格更美观

使用CSS实现固定表头不滚动的方法简单易懂，不必引入额外的JavaScript文件。但是需要注意的是：设置表格的宽度一定要为100%，否则会出现表格布局错乱的情况。