最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

css控制固定表头,兼容行列合并_html/css

来源:动视网 责编:小采 时间:2020-11-27 16:00:23
文档

css控制固定表头,兼容行列合并_html/css

css控制固定表头,兼容行列合并_html/css_WEB-ITnose:项目中设计的报表table设计的列数相对过多,当拖动下方的滚动条时无法对应表头所对应的列,因此在网上搜索了好一段日子,最后在网上找到了一些参考资料,然后总结归纳出兼容行列合并的固定表头demo。 多浏览器没有做太多测试,在ie6中已测试通过。 功能期待
推荐度:
导读css控制固定表头,兼容行列合并_html/css_WEB-ITnose:项目中设计的报表table设计的列数相对过多,当拖动下方的滚动条时无法对应表头所对应的列,因此在网上搜索了好一段日子,最后在网上找到了一些参考资料,然后总结归纳出兼容行列合并的固定表头demo。 多浏览器没有做太多测试,在ie6中已测试通过。 功能期待


项目中设计的报表table设计的列数相对过多,当拖动下方的滚动条时无法对应表头所对应的列,因此在网上搜索了好一段日子,最后在网上找到了一些参考资料,然后总结归纳出兼容行列合并的固定表头demo。

多浏览器没有做太多测试,在ie6中已测试通过。

功能期待了很久今天终于找到解决的方式,总结到javaeye中方便日后查阅。实现方式可能还有更好的,希望有大牛路过,给我留点更好的实现例子作日后交流之用。

以下是相关的css

Html代码

以下是HTML

Html代码

  1. 利用CSS代码让Table产生固定表头

  2. 列头 列头 列头
    h1 h2 h3 h4 h5
  3. a
  4. 单元格2 单元格3 单元格4 单元格5 单元格5
  5. b
  6. 单元格2 单元格3 单元格4 单元格5 单元格5
  7. c
  8. 单元格2 单元格3 单元格4 单元格5 单元格5
  9. d
  10. 单元格2 单元格3 单元格4 单元格5 单元格5
  11. e
  12. 单元格2 单元格3 单元格4 单元格5 单元格5
  13. f
  14. 单元格2 单元格3 单元格4 单元格5 单元格5
  15. g
  16. 单元格2 单元格3 单元格4 单元格5 单元格5

另外补充一点,如果在表头合并的是最后一行的时候,排版将出现问题。由于上面合并的只有两行,因此样式没有受到改变,如果要处理,暂时的解决办法就是不合并rowspan最后一行,将其多行显示,有点牵强,但找不到解决办法。类似情况如下图:

找了些资料可作参考:
http://www.loveayang.com.cn/post/2008/04/e59bbae5ae9ae8a1a8e5a4b4e79a84CSSe5ae9ee78eb0.aspx
文章中亦说没有办法解决上述的这个问题,留待日后有更好的解决方案。

文档

css控制固定表头,兼容行列合并_html/css

css控制固定表头,兼容行列合并_html/css_WEB-ITnose:项目中设计的报表table设计的列数相对过多,当拖动下方的滚动条时无法对应表头所对应的列,因此在网上搜索了好一段日子,最后在网上找到了一些参考资料,然后总结归纳出兼容行列合并的固定表头demo。 多浏览器没有做太多测试,在ie6中已测试通过。 功能期待
推荐度:
标签: 固定 兼容 html
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top