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. 利用反射和代理简单模拟mybatis实现简单的CRUD

    利用反射接口做java数据库操作 今天突发奇想,好像一些基本的CRUD操作路数都是一样的,又想到mybatis中的操作,便想着简单的模拟一下.随便写写,就当练习反射了. Dao接口类: 这里使用泛型, ...

  2. Vulhub 漏洞学习之：Couchdb

    Vulhub 漏洞学习之:Couchdb 目录 Vulhub 漏洞学习之:Couchdb 1 Couchdb 垂直权限绕过漏洞(CVE-2017-12635) 1.1 漏洞利用过程 2 Couchdb ...

  3. CenterOS7上搭建RabbitMQ集群

    1 保证多个主机之间能够互相访问 修改host , vi /etc/hosts 例如修改成下面的内容: 192.168.10.157 rabbitmq-1 192.168.10.159 rabbitm ...

  4. Can not use keyword ‘await’ outside an async function

  5. 轻量级CI/CD发布部署环境搭建及使用_04_docker安装nexus3

    轻量级CI/CD发布部署环境搭建及使用_04_配置宿主机的环境:jdk.maven.node.pythod2 尽自己的绵薄之力,为开源技术分享添砖加瓦   1,搜索nexus3 docker sear ...

  6. react-native-sortable-list没有渲染数据

    问题如题. 原因是我的order数组为空数组,应该将数组元素补充上.

  7. Min_25 Sieve 学习笔记

    这个东西不是人想的. 解决问题:积性函数前缀和. 适用条件:可以快速计算 \(f(p)\) 的前缀和,\(f(p^k)\) 可以被表示成若干完全积性函数的线性组合(指对应项可以快速组合出来). 时空复 ...

  8. RuntimeError: Expected all tensors to be on the same device, but found at least two devices, cuda:0 and cpu!

    错误原因:数据有的在cpu上有的在gpu上debug:断点到出错位置查看类型,或者打印`x.is_cuda`查看修改:将cpu上的数据通过`.to(device)`加载到gpu上

  9. 04-python垃圾回收机制

    python垃圾回收机制 一.引入 解释器在执行定义变量的语法时,会申请内存空间来存放变量值,每一块内存空间都有其唯一的内存地址,我们在前面说过,变量名并不是存放的变量值,而是存放的内存地址,通过访问 ...

  10. 蓝牙mesh组网实践（选择性配网与自配网参数分析）

    目录 使用配网器配网方式: 在之前的文章中介绍了CH582单片机在蓝牙mesh组网中的两种配网方式,有介绍到:未配网设备不能选择被哪个配网器配网,配网器可以选择给哪个未配网设备配网.接下来介绍在哪里可 ...