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. CF846E - Chemistry in Berland

    题意:有一颗树,每个点上有 \(b_i\) 东西,从叶子往上的汇率是 \(1:1\),从父亲往下的汇率是 \(k:1\),求能否使每个点的东西都不少于 \(a_i\). 我们发现,从上往下肯定是不划算 ...

  2. Python实战项目1-开发流程需求分析/基础环境搭建

    软件开发流程 # 真正的企业里软件从立项到交付整个过程 -立项:确定公司要开发这个软件 公司高层 -软件来源 -产品经理设计出来的---->互联网项目 互联网公司 -用户(医院,政府部门,企业. ...

  3. layui级联操作

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link re ...

  4. Centos7提示Initial setup of CentOS Linux 7 (core)

    Initial setup of CentOS Linux 7 (core) 1) [x] Creat user 2) [!] License information (no user will be ...

  5. 用浏览器打开pdf格式的文件默认全屏显示

    打开地址如 http://xxxxx.pdf 在文件地址后面添加#view=FitH,top,可实现全屏查看pdf文件. http://xxxxx.pdf#view=FitH,top,

  6. foreach 和for

    "foreach和for循环如果只是遍历集合或者数组,用foreach好些,如果是对集合中的值进行修改,就要用for循环了,其实foreach的内部原理其实也是Iterator,但不能像It ...

  7. 汇总-软件-分类：SSH客户端工具

    官网-FinalShell 官网-Tabby GitHub-Tabby

  8. CentOS Linux release 7.6 zabbix5.0 安装

    # zabbix 安装关方文档 https://www.zabbix.com/cn/download?zabbix=5.0&os_distribution=centos&os_vers ...

  9. JAVA诞生历史【转载】

    一.计算机语言的发展史 1.第一代语言(只有机器能读懂,人根本读不懂) 纯机器语言 2.第二代语言(机器能读懂,人可以读懂,但是很难懂) 汇编语言(符号语言) 3.第三代语言(机器能读懂,也非常便于人 ...

  10. pyqt5离线安装教程

    目前总结的安装pyqt5,需要的离线安装包,除了每一个包要跟系统版本适配之外,还要考虑包跟包之间的适配.pyqt5跟它开头的一些包要保持是同一个版本,至少有2个小数点的位数是一样的才行,qt5跟它开头 ...