html原生table三级 多层表头表格配置

最新推荐文章于 2024-08-17 16:56:44 发布
最新推荐文章于 2024-08-17 16:56:44 发布
阅读量6.2k 收藏 23
点赞数 14
分类专栏： HTML 个人总结 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48276047/article/details/121588528
版权

■ 两级表头

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>两级表头</title>
  <style type="text/css">
    td,
    th {
      font-style: normal;
      font-weight: normal;
      text-align: center;
    }

    tr {
      height: 48px;
    }

    .firstHead th {
      font-size: 14px;
      font-weight: bold;
    }

    .secondHead th {
      font-size: 13px;
      font-weight: bold;
    }

    table {
      border-collapse: collapse;
      border-color: #D8DFE6;
    }

    table thead {
      background: #F3FDFF;
    }
  </style>
</head>

<body>
  <div class="table">
    <table border="1" width="100%">
      <colgroup>
        <col style="width: 150px;" />
        <col style="width: 50px;" />
        <col style="width: 100px;" />
        <col style="width: 100px;" />
        <col style="width: 100px;" />
        <col style="width: 100px;" />
        <col style="width: 100px;" />
        <col style="width: 100px;" />
        <col style="width: 100px;" />
        <col style="width: 100px;" />
      </colgroup>
      <thead>
        <tr class="firstHead">
          <th rowspan="2" colspan="1">
            项目
          </th>
          <th rowspan="2" colspan="1">
            行次
          </th>
          <th rowspan="1" colspan="3">
            平均资金占用额
          </th>
          <th rowspan="1" colspan="3">
            投资收益
          </th>
          <th rowspan="1" colspan="2">
            投资回报率
          </th>
        </tr>
        <tr class="secondHead">
          <th> 上年数 </th>
          <th> 本年预算数 </th>
          <th> 增长率 </th>
          <th> 上年数 </th>
          <th> 本年预算数 </th>
          <th> 增长率 </th>
          <th> 上年数 </th>
          <th> 本年预算数 </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

效果图：
在这里插入图片描述

■ 三级表头

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>三级表头</title>
  <style type="text/css">
    td,
    th {
      font-style: normal;
      font-weight: normal;
      text-align: center;
    }

    tr {
      height: 48px;
    }

    .firstHead th,
    .secondHead th,
    .thirdHead th {
      font-size: 14px;
      font-weight: bold;
    }

    table {
      border: none;
      border-collapse: collapse;
      border-color: #D8DFE6;
    }

    table thead {
      background: #F3FDFF;
    }

    table tbody tr {
      height: 50px;
    }
  </style>
</head>

<body>

  <body>
    <div class="table">
      <table border="1" width="100%">
        <colgroup>
          <col style="width: 50px;" />
          <col style="width: 100px;" />
          <col style="width: 100px;" />
          <col style="width: 100px;" />
          <col style="width: 100px;" />
          <col style="width: 100px;" />
          <col style="width: 100px;" />
          <col style="width: 100px;" />
          <col style="width: 100px;" />
          <col style="width: 100px;" />
        </colgroup>
        <thead>
          <tr class="firstHead">
            <th rowspan="3"> 序号 </th>
            <th rowspan="3"> 项目名称 </th>
            <th rowspan="3"> 自有资金 </th>
            <th rowspan="1" colspan="6"> 本年计划投资额 </th>
            <th rowspan="3"> 备注 </th>
          </tr>
          <tr class="secondHead">
            <th rowspan="3"> 合计 </th>
            <th colspan="3"> 其中： </th>
            <th colspan="2"> 其中： </th>
          </tr>
          <tr class="thirdHead">
            <th> 自有资金 </th>
            <th> 对外贷款 </th>
            <th> 其他 </th>
            <th> 主业 </th>
            <th> 非主业 </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</body>

</html>

在这里插入图片描述

■ 四级表头

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>四级表头</title>
  <style type="text/css">
    td,
    th {
      font-style: normal;
      font-weight: normal;
      text-align: center;
    }

    tr {
      height: 48px;
    }

    .firstHead,
    .secondHead,
    .thirdHead {
      height: 42px;
    }

    .fourthHead {
      height: 64px;
    }

    .firstHead th {
      font-size: 15px;
      font-weight: bold;
    }

    table {
      border: none;
      border-collapse: collapse;
      border-color: #D8DFE6;
    }

    table thead {
      background: #F3FDFF;
    }

    table tbody td {
      width: 6.3%;
    }

    table tbody tr {
      height: 50px;
    }
  </style>
</head>

<body>
  <div class="table">
    <table border="1" width="100%">
      <thead>
        <tr class="firstHead">
          <th colspan="1" rowspan="5" width="4%">序号</th>
          <th colspan="1" rowspan="5" width="6.4%">终端使用人</th>
          <th colspan="11">工作开展情况</th>
        </tr>
        <tr class="secondHead">
          <th colspan="1" rowspan="4">工作量总计</th>
          <th colspan="6">采集情况</th>
          <th colspan="4">检查情况</th>
        </tr>
        <tr class="thirdHead">
          <th colspan="3" rowspan="1">人口</th>
          <th colspan="3" rowspan="1">房屋</th>
          <th colspan="4" rowspan="1">房屋隐患</th>
        </tr>
        <tr class="fourthHead">
          <th>总数</th>
          <th>户籍</th>
          <th>流动</th>
          <th>总数</th>
          <th>机动车</th>
          <th>非机动车</th>
          <th>总数</th>
          <th>生活安全</th>
          <th>出租管理</th>
          <th>房屋功能</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

在这里插入图片描述

D.U.S.Tべ
关注
专栏目录
js table 多级表头
xiaochouniu1的博客
07-26 1121
代码 <table> <tr> <th rowspan='2'>1</th> <th rowspan='2'>2</th> <th rowspan='2'>3</th> <th rowspan='2'>4</th> <th rowspan='2'&g
html table实现复杂表头的示例代码
11-20
使用html做复杂的表格。复杂表格一般是用到td的两个属性：rowspan 、colspan属性值。 在html中<td> 标签定义 HTML 表格中的标准单元格。 　　(1)rowspan 属性规定单元格可横跨的行数; 　　(2)colspan 属性规定单元格可横跨的列数。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>多表头表格</title> </head> <body> <table id="tab" cellpadding="1"
html的table多级表头表格的代码
weixin_30300523的博客
09-26 4338
1，两级表头的代码 <html> <head> <title>多层表头</title> <link rel="stylesheet" href="./css/reset.css"> <style type="text/css"> td, th { font-style: normal; font...
前端技巧——复杂表格在html当中的实现
最新发布
m0_72678953的博客
08-17 820
table {th,td {
复杂JTable（复杂表头、跨行列表体）
03-27
复杂JTable（复杂表头、跨行列表体）
原生table-多级表头【广度优先实现】
dabaooooq的博客
02-09 2091
既然提到多级表头，合并行合并列肯定少不了，先把树结构处理为一层数据结构，然后计算合并行，每个节点需要合并的行数需要判断一下 当前节点的层级是否不等于整个树结构的最大层级并且当前节点下是否有子节点，如果满足上述条件，则需要合并行，合并的数量为：最大层级数 - 当前节点层级 + 1；然后是合并列，每个节点合并的列数为：无子级节点1,、有子级节点：当前节点下所有子级数量的和；在给每个节点做好需要合并的行列数的标识后，可以开始处理用来循环表头的数据。处理一个二维数组，每项的数组中分别存放的是层级相同的节点，[[1,
HTML的＜table＞多级表头绘制
0303
03-14 5924
适用于工资单等场景使用
table如何实现多样表头—前端html
yunduanaoligei的博客
10-12 1713
今天分享下” table如何实现多样表头—前端html“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 应用html做繁杂的表格。繁杂表格一般是使用td的2个属性：rowspan 、colspan属性值。 在html中 标识界定 HTML 表格中的规范单元格。 (1)rowspan 属性要求单元格可横跨的行数; (2)colspan 属性要求单元格可横跨的列数。 ​​<​​​​html​​​​> ​​
原生table组件 自己封装：多个表头+表头合并
weixin_55333190的博客
12-21 1723
01.组件代码 直接复制使用就行，会根据父盒子自适应100% 01.根据父级100%大小 父级多大就是多大，高度:超出会有滚动条 宽度：自适应 均匀分 02. 表头值需要按顺序来，一行表头就传给hearder0 以此内推 表头0：hearderPri0:['Header 1', 'Header 2', 'Header 3'] 表头1：hearderPri1 表头2：hearderPri2 03.表格数据一个内数组代表一行，顺序跟表头一一对应 表格
记录layui table表格（多级复杂表头、固定首尾多例、批量操作后动态刷新页面显示）关键代码
a2130241的博客
06-29 1414
html添加表 <table id="subjectTable" lay-filter="test"></table> layui操作按钮 <script type="text/html" id="barDemo"> {{# if(d.zt ==3){ }} <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">驳回</a> {{# } }} <...
html js树形图多级菜单美观可配置
01-22
html js树形图，美观大方，界面友好，可配置，也可自己重新调整样式，美观的菜单列表，多级列表，三级及三级以上列表，可自行配置
实现Table表头和列固定
08-01
实现表头和列固定，并可行多表头，多列(左右都可以)，无错位
单行或多行复杂的固定(冻结)表头的完美解决方案第二版
06-08
总的来说，这个“单行或多行复杂的固定(冻结)表头的完美解决方案第二版”为开发者提供了一个跨浏览器、高性能的工具，使得即使在大数据量和多层级表头的场景下，用户依然能清晰地看到表头信息，提升了用户体验。...
html表头和左侧固定js,JS固定表头及固定左边列
weixin_29735819的博客
06-03 1339
花了两个晚上的时间，终于搞定了固定表头功能。先上效果图(注：有背景图和灰色的行、列为固定的表头行和左边列，背景图是表格原有的样式，不是固定表头后添加的)指定要固定的行数和列数，兼容各浏览器，固定后的表头和左边列的样式外观完全复制原来的表格样式。可以设置固定整个表头，即Table中有设置了 ，可以固定整个thead；也可以按指定的行数固定。有一种情况不可以启用左边列固定，即当表头行中的相应的列的单元...
使用vue-table-tree-grid实现多级表格复杂效果
weixin_57792333的博客
09-16 3078
在写 后台电商管理 的vue项目时, 要实现如下 复杂的表格效果 这时还用 element-ui中的table 组件实现 这类效果就很麻烦 github 某作者 提供了 vue-table-width-tree-grid 第三方包 可以帮我们很快的实现 此类效果 github 地址 https://github.com/MisterTaki/vue-table-with-tree-grid 先 安装 在我们的项目中 //在 git中 执行 npm i vue-table-with-tree-gr.
结合element完成分列分级树形折叠分级表单
qq_46608252的博客
03-11 820
原生HTML完成树形折叠分级表单
HTML多表头表格
热门推荐
游海东的技术专栏
02-19 1万+
1、多表头表格代码 多表头表格 body{ width:98%; height:100%; font-size:12px; background-color:#FCF; text-align:center; } #tab{ width:100%; height:100%; font-size:12px;
table表格-多级表头
hrbsfdxzhq01的博客
02-19 3142
数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。 只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。 层级分析：第一列日期；第二列配送信息                   配送信息列：嵌套姓名2列；嵌套地址三列                   地址列：嵌套省份3列、市区4列、地址5列、邮编6列 &lt...
vue 原生table表格表头固定
09-07
Vue原生的table表格表头固定，可以通过CSS的position属性和JS的scroll事件来实现。 首先，在table标签外面嵌套一个div容器，设置其样式为position: relative，用于容纳表格和表头。 然后，在表格表头的tr标签上添加一个ref属性，用于在JS中获取该元素。 接下来，使用JS监听div容器的scroll事件，在事件中通过ref获取到表头元素，并获取该元素的offsetTop和scrollTop属性值。 然后，判断scrollTop是否大于或等于offsetTop，如果是则添加一个css类或样式，将表头固定在顶部；如果不是，则移除该类或样式。 最后，将改变样式的操作放在一个debounce的函数中，用于优化滚动事件的性能。 具体代码如下： <template> <div class="container" ref="container" @scroll="handleScroll"> <table class="table"> <thead> <tr ref="thead"> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> </thead> <tbody> <tr> <td>内容1</td> <td>内容2</td> <td>内容3</td> </tr> ... </tbody> </table> </div> </template> <script> export default { methods: { handleScroll() { const container = this.$refs.container; const thead = this.$refs.thead; const offsetTop = thead.offsetTop; const scrollTop = container.scrollTop; if (scrollTop >= offsetTop) { thead.classList.add("fixed"); } else { thead.classList.remove("fixed"); } }, }, }; </script> <style> .container { position: relative; max-height: 300px; overflow-y: scroll; } .fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; } .table { width: 100%; } /* 省略其他样式 */ </style> 以上就是利用Vue原生实现table表格表头固定的方法。通过设置CSS样式和监听scroll事件，可以在滚动时使表头保持在页面顶部。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值