首页 > 软件开发 > HTML >

如何实现HTML的表头固定

来源:互联网 2023-03-16 19:11:14 421

我们运用HTML进行表格制作的时候,产生滚动条的时候我们很希望将表头固定住,那么该如何的实现呢?下面小编给大家分享一下。j5i办公区 - 实用经验教程分享!

工具/原料

  • Sublime Text

方法/步骤

  • 1

    打开Sublime Text工具,新建一个html文档,如下图所示j5i办公区 - 实用经验教程分享!

    如何实现HTML的表头固定j5i办公区 - 实用经验教程分享!

  • 2

    然后在body区域里,我们添加表格的表头部分,如下图所示,注意table-head接下来会声明这个样式,另外需要用到colgroup元素j5i办公区 - 实用经验教程分享!

    如何实现HTML的表头固定j5i办公区 - 实用经验教程分享!

  • 3

    接下来我们准备表格的内容部分,如下图所示,这里的colgroup的宽度要和表头的一样j5i办公区 - 实用经验教程分享!

    如何实现HTML的表头固定j5i办公区 - 实用经验教程分享!

  • 4

    然后我们在style标签里面声明表格中用到的样式,如下图所示j5i办公区 - 实用经验教程分享!

    如何实现HTML的表头固定j5i办公区 - 实用经验教程分享!

  • 5

    接下来就可以运行页面代码了,我们会看到如下图所示的界面,滚动条只在内容部分j5i办公区 - 实用经验教程分享!

    如何实现HTML的表头固定j5i办公区 - 实用经验教程分享!

  • 5该信息未经许可获取自百度经验
  • 6

    我们将一个单元格中的内容多写一些,你会看到它会自动换行,并且表格头也不会变形的j5i办公区 - 实用经验教程分享!

    如何实现HTML的表头固定j5i办公区 - 实用经验教程分享!

  • 7

    综上所述,HTML中表格头部的固定主要是运用了colgroup元素保证头部和内容宽度相同j5i办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!j5i办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码