本文介绍了一种设计思路，通过将HTML表格的表头和内容分开，放入两个不同的<table>标签中，并利用<div>实现滚动效果。内容部分放置在一个设置高度并开启overflow:auto的div中，确保当表格内容过多时出现滚动条。同时，通过设置单元格宽度保持表头和内容的列宽一致。提供两种不同内容量时的效果图以及相关源代码。
设计思路：
将表格的表头与内容分别放到两个<table>标签里，然后将其放在一个<div>里以使表头和表格的总宽度一致，将表格内容放到一个可滚动的div(<div style="overflow:auto;height:150px">)里，为每个单元格添加类来固定宽度以实现表头与内容的单元格宽度一致。
这种方式当表格内容很少，达不到可滚动容器的高度时不显示滚动条，当表格内容超过这个高度时，显示滚动条，可以通过滑动滚动条来查看表格内容。
效果图：
当表格内容很少时：
当表格内容多时：
源代码：
<!DOCTYPE html>
<html>
<head lang="en">
最低0.47元/天 解锁文章
扫一扫
2328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
