CSS Grid 布局实现固定表头和内容滚动的完美解决方案
随着 Web 应用及网站开发的需求越来越强,表格组件在前端开发中不可缺少,但是大量的表格数据渲染必然会出现表格数据过多时表头无法固定的问题,在此我们介绍一种基于 CSS Grid 布局实现固定表头和内容滚动的完美解决方案。
CSS Grid 布局是一种强大的布局方式,它允许我们在容器中使用类似表格的布局方式,可以快速简便的实现固定表头和内容滚动的效果。
首先,我们需要把表格分为头部和主体两部分,在 HTML 中也分别对应 <thead>
和 <tbody>
,然后我们将它们分别放置在两个容器中,即创建两个 div 容器,并设置样式如下:
// javascriptcn.com 代码示例 <div class="table-container"> <div class="table-header"> <!-- 表头部分 --> </div> <div class="table-body"> <!-- 表格主体部分 --> </div> </div>
// javascriptcn.com 代码示例 .table-container { display: grid; grid-template-rows: auto 1fr; /* 设置容器有两行,第一行高度为自适应,第二行高度为剩下的空间(扩展) */ } .table-header, .table-body { display: contents; /* 使子元素不受到父级元素的影响 */ } .table-header { overflow: hidden; /* 隐藏表头溢出的部分 */ } .table-header table, .table-body table { width: 100%; /* 设置表格宽度为 100%,宽度与包含元素相同 */ border-collapse: collapse; /* 使表格边框重叠 */ } .table-body { overflow: auto; /* 表格主体部分设置滚动 */ overscroll-behavior: contain; /* 滚动时,不超过容器大小 */ }
以上样式基本上解决了固定表头和内容滚动的大部分问题。
但是,当表头和表格主体部分有较多列时,会发现表头和表格主体宽度不一致或出现了滚动条,因为表格主体的宽度多出了滚动条的宽度,所以我们需要再做一些优化。
// javascriptcn.com 代码示例 .table-container { /* ... */ grid-template-columns: repeat(auto-fill, minmax(1px, 1fr)); /* 将主体部分按比例分配宽度 */ align-items: center; /* 将垂直方向的对齐方式设置为居中 */ } .table-body { /* ... */ padding-right: 17px; /* 根据浏览器滚动条的宽度,调整表格主体部分的样式 */ padding-bottom: 17px; }
通过以上设置,我们成功实现了固定表头和内容滚动的效果,当表格数据较多时,用户可以方便的浏览表格数据,提高了网站或应用的用户体验度。
// javascriptcn.com 代码示例 <div class="table-container"> <div class="table-header"> <table> <thead> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>邮箱</th> <th>地址</th> </tr> </thead> </table> </div> <div class="table-body"> <table> <tbody> <tr> <td>1</td> <td>小明</td> <td>男</td> <td>20</td> <td>xiaoming@qq.com</td> <td>广州市</td> </tr> <tr> <td>2</td> <td>小红</td> <td>女</td> <td>18</td> <td>xiaohong@qq.com</td> <td>北京市</td> </tr> <tr> <td>3</td> <td>小李</td> <td>男</td> <td>30</td> <td>xiaoli@qq.com</td> <td>深圳市</td> </tr> <!-- ... --> </tbody> </table> </div> </div>
总结
通过以上的示例,我们可以看出,基于 CSS Grid 布局实现固定表头和内容滚动,能够方便快捷的优化表格组件,提高用户体验度。通过本篇文章的介绍,你可以了解到如何发挥 CSS Grid 布局的优势,进一步提高前端开发的技巧水平,如果你还有什么困惑,可以通过实践和学习进一步深化理解。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/654b9f417d4982a6eb55d8bd