1，两级表头的代码
<html>
<head>
<title>多层表头</title>
<link rel="stylesheet" href="./css/reset.css">
<style type="text/css">
td,
th {
font-style: normal;
font-weight: normal;
text-align: center;
}
 
tr {
height: 48px;
}
 
.twoHead th {
width: 6.25%;
height: 48px;
padding: 0 10px;
font-size: 14px;
font-weight: normal;
}
 
.firstHead th {
font-size: 14px;
font-weight: bold;
}
 
table {
border: none;
border-collapse: collapse;
border-color: #D8DFE6;
}
 
table thead {
background: #F3FDFF;
}
</style>
</head>
<body>
<div></div>
<div class="table">
<table border="1" cellspacing="0" cellpadding="10" width="100%">
<thead>
<tr class="firstHead">
<th colspan="1" rowspan="2">序号</th>
<th colspan="1" rowspan="2">村庄名称</th>
<th colspan="6">本周采集房屋总量（户）</th>
<th colspan="3">累计采集房屋总量（人）</th>
<th colspan="4">本周隐患处理情况（处）</th>
</tr>
<tr class="twoHead">
<th>合计</th>
<th>对比上周变化</th>
<th>出租房屋数量</th>
<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>30万</td>
<td>20万</td>
<td>60万</td>
<td>100万</td>
<td>看着办</td>
<td>∞∞</td>
<td>20万</td>
<td>100万</td>
<td>看着办</td>
<td>∞∞</td>
<td>20万</td>
<td>20万</td>
<td>20万</td>
<td>20万</td>
</tr>
</tbody>
</table>
</div>
</body>
</html
效果图片为：

2，两个以上级表头的代码

<html>
<head>
<title>多层表头22</title>
<link rel="stylesheet" href="./css/reset.css">
<style type="text/css">
td,
th {
font-style: normal;
font-weight: normal;
text-align: center;
}
 
tr {
height: 48px;
}
 
.firstHead,
.twoHead,
.threeHead {
height: 32px;
}
 
.fourHead {
height: 64px;
}
 
.firstHead th {
font-size: 14px;
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></div>
<div class="table">
<table border="1" cellspacing="0" cellpadding="10" 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="14">工作开展情况</th>
</tr>
<tr class="twoHead">
<th colspan="1" rowspan="4">工作量总计</th>
<th colspan="9">采集情况</th>
<th colspan="4">检查情况</th>
</tr>
<tr class="threeHead">
<th colspan="3" rowspan="1">人口</th>
<th colspan="3" rowspan="1">房屋</th>
<th colspan="3" rowspan="1">车辆</th>
<th colspan="4" rowspan="1">房屋隐患</th>
</tr>
<tr class="fourHead">
<th colspan="1" rowspan="2">总数</th>
<th colspan="1" rowspan="2">户籍</th>
<th colspan="1" rowspan="2">流动</th>
<th colspan="1" rowspan="2">总数</th>
<th colspan="1" rowspan="2">自住</th>
<th colspan="1" rowspan="2">出租</th>
<th colspan="1" rowspan="2">总数</th>
<th colspan="1" rowspan="2">机动车</th>
<th colspan="1" rowspan="2">非机动车</th>
<th colspan="1" rowspan="2">总数</th>
<th colspan="1" rowspan="2">生活安全</th>
<th colspan="1" rowspan="2">出租管理</th>
<th colspan="1" rowspan="2">房屋功能</th>
</tr>
</thead>
<tbody>
<tr>
<td width="4%">∞</td>
<td>30万</td>
<td>20万</td>
<td>60万</td>
<td>100万</td>
<td>看着办</td>
<td>∞∞</td>
<td>20万</td>
<td>100万</td>
<td>看着办</td>
<td>∞∞</td>
<td>20万</td>
<td>20万</td>
<td>20万</td>
<td>20万</td>
<td>20万</td>
</tr>
</tbody>
</table>
</div>
</body>
</html

图片显示效果：

html的table多级表头表格的代码的更多相关文章

  1. 导出多级表头表格到Excel

    方法一:用NPOI定义多级表头导出: 引用头: using NPOI.DDF; using NPOI.OpenXmlFormats.Wordprocessing; using NPOI.HSSF.Us ...

  2. EasyUI DataGrid 多级表头设置

    使用EasyUI做一个报表统计,需要合并表头为多级表头,核心代码如下: $('#dg').datagrid({ url:'datagrid_data.action', fit : true, fitC ...

  3. Qt实现表格树控件-支持多级表头

    目录 一.概述 二.效果展示 三.实现方式 四.多级表头 1.数据源 2.表格 3.QStyledItemDelegate绘制代理 五.测试代码 六.相关文章 原文链接:Qt实现表格树控件-支持多级表 ...

  4. element ui表格常用功能如：导出 新增 删除 多选 跨页多选 固定表头 多级表头 合并行列 等常见需求

    <template> <div class="table-cooperte"> <el-table :data="tableData&quo ...

  5. html5 table的表头固定的HTML代码

    table的表头固定的HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  6. js Table冻结表头示例代码

    Table冻结表头的js实现代码. Table冻结表头: <script type="text/javascript"> //冻结table的表头  function  ...

  7. layui table动态表头 改变表格头部 重新加载表格

    改变头部原理: 删除原来表格, 重新建立DOM元素, 重新加载table,实现表头改变 明白了原理, 我相信大家都能写出来了, table.reload(ID, options)目前好像还不支持con ...

  8. Bootstrap Table踩坑——设置多级表头后只显示第一级表头问题解决办法

    今天设置了Bootstrap Table的复杂表头,设置了多级表头(两行列名),但是只能显示第一级表头(第一行的列名),第二级的表头被第一级的表头覆盖.但是我仿照其他网上的其他设置复杂表头例子都能正常 ...

  9. FineUI小技巧（7）多表头表格导出

    前言 之前我们曾写过一篇文章 FineUI小技巧(3)表格导出与文件下载,对于在 FineUI 中导出表格数据进行了详细描述.今天我们要更进一步,介绍下如何导出多表头表格. 多表头表格的标签定义 在 ...

  10. HTML多表头表格

    1.多表头表格代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

随机推荐

  1. 网关与网络地址（网络号）以及IP地址、广播地址

    转载新浪博客: http://blog.sina.com.cn/s/blog_406127500101i8bp.html

  2. 《HelloGitHub》第 83 期

    兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣.入门级的开源项目. https://github.com/521xueweiha ...

  3. JUC学习笔记

    1 进程与线程:进程指正在运行的程序,进程拥有一个完整的.私有的基本运行资源集合.它有自己的内存空间.为了便于进程之间的通信,大多数操作系统都都支持进程间通信(IPC). IPC通信包括管道.消息队列 ...

  4. 简单使用wireshark

    wireshark抓包工具 拓扑图: 拓扑图解释:终端用户使用wireshark抓包工具监听无线网卡,监听时,终端访问互联网,可实时监听网络抓包 操作步骤: 一,打开wireshark抓包工具,监听网 ...

  5. rust 计算两个经纬度的距离

    依赖库 math_adapter={ version = "0.3.1", features = [ "cgmath_ops" ] } 实现 use math_ ...

  6. springboot自带的MD5加密

    //md5DigestAsHex返回的是string类型 DigestUtils.md5DigestAsHex(user.getPassword().getBytes(StandardCharsets ...

  7. 记一次SpringBoot整合WebSocket 找不到ServerEndpointExporter类的问题

    package com.mengxiangnongfu.cms.framework.configure; import org.springframework.context.annotation.B ...

  8. Unity UI 识别画圆手势

    最近做了一个项目,需要打开一个编辑UI,平时不显示,如果在UI界面上做一个按钮,感觉很丑,就想到了Reporter_Logs的画圆触发. 识别到你在界面上画了一个圆 (可用于 Windows 和 An ...

  9. python日志logging配置

    python日志logging配置 为了方便ELK收集日志,将日志打印成json格式 开发过程中,使用json格式不方便排查问题 本文章使用python的logging模块,一步步增加配置,来说明每个 ...

  10. K8S详细教程

    Kubernetes详细教程 1. Kubernetes介绍 1.1 应用部署方式演变 在部署应用程序的方式上,主要经历了三个时代: 传统部署:互联网早期,会直接将应用程序部署在物理机上 优点:简单, ...