设计思路:
将表格的表头与内容分别放到两个<table>标签里,然后将其放在一个<div>里以使表头和表格的总宽度一致,将表格内容放到一个可滚动的div(<div style="overflow:auto;height:150px">)里,为每个单元格添加类来固定宽度以实现表头与内容的单元格宽度一致。
这种方式当表格内容很少,达不到可滚动容器的高度时不显示滚动条,当表格内容超过这个高度时,显示滚动条,可以通过滑动滚动条来查看表格内容。
效果图:
当表格内容很少时:
当表格内容多时:
源代码:
<!DOCTYPE html>
<html>
<head lang="en">