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. Commons-Collections反序列化

    Java反序列化漏洞 Commons Collections Apache Commons 是 Apache 软件基金会的项目.Commons Collections 包为 Java 标准的 Coll ...

  2. [EULAR文摘] 超声腱鞘炎对RA早期诊断的价值

    超声腱鞘炎对RA早期诊断的价值 Sahbudin I, et al. EULAR 2015. Present ID: OP0015. 背景:为了预测早期未分化疾病发展为类风湿关节炎(RA), EULA ...

  3. 02#Web 实战：实现树形控件

    前言 这是一篇个人练习 Web 前端各种常见的控件.组件的实战系列文章.本篇文章将介绍个人通过 JQuery + 无序列表 + CSS 动画完成一个简易的树形控件. 最终实现的效果是: 这样结构比较复 ...

  4. PostgreSQL数据库切割和组合字段函数

    Postgresql里面内置了很多的实用函数,下面介绍下组合和切割函数一.组合函数1.concata.语法介绍 concat(str "any" [, str "any& ...

  5. 代码随想录-day2

    哈希表 基础知识 哈希表和链表都是属于基础数据结构的一种,都是必须掌握牢靠的知识. 哈希表是根据关键码的值而直接进行访问的数据结构. 简单来说就是使用数据得到的哈希值来作为哈希表的key用于获取数据. ...

  6. script和template里可选链运算符?.报错Syntax Error: Unexpected token (64:2)

    前情:babel-core@6.2.3,  vue@2.7.14 试过的方法:1.安装@babel/plugin-proposal-optional-chaining,设置.babelrc文件如下,报 ...

  7. vue2+ts 设计一个扑克牌比大小的游戏

    首先  

  8. JavaScript之异步编程

    什么是异步 异步:Asynchronous,async是与同步synchronous,sync相对的概念. 传统单线程编程中,程序的运行是同步的,指程序运行在一个控制流之中运行.而异步的概念就是不保证 ...

  9. dom4j解析和生成xml文件

    解析xml大致步骤: 1: 创建SAXReader: 2: 使用SAXReader解析指定的xml文档信息,并返回对应Document对象.Document对象中就包含了该xml文中的所有信息以及结构 ...

  10. 钉钉获取群openConversationId方式以及企业内部机器人发送群消息

    https://open-dev.dingtalk.com/apiExplorer#/jsapi?api=biz.chat.chooseConversationByCorpId 通过上述URL进入钉钉 ...