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. GPS地图生成02之经典算法体验

    经典的利用轨迹生成地图的算法与数据集可寻找于:Mapconstruction by pfoser Mapconstruction by pfoser数据集中,雅典数据集投影坐标系为(UTM, GGRS ...

  2. label 与input其中input的 id与name

    <div> <label for="myfile">新头像 {% load static %} <img src="{% static 'i ...

  3. sentry-sdk 使用

    一.代码 import os import random import logging import sentry_sdk from sentry_sdk.tracing import Transac ...

  4. MyBatisPlus(springBoot版）-尚硅谷

    Pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...

  5. python 搭建自启动FTP服务器，编译后exe后个人随时可用，非常方便

    import win32apiimport win32conclass AutoRun: """ itemname:要添加的项值名称 , path:要添加的exe路径绝对 ...

  6. 【面试题】手写async await核心原理，再也不怕面试官问我async await原理

    前言 async await 语法是 ES7出现的,是基于ES6的 promise和generator实现的 generator函数 在之前我专门讲个generator的使用与原理实现,大家没了解过的 ...

  7. 关于paddleocr2.6 布局分析的踩坑总结（一）

    8月24日paddleocr发布了2.6.0,之前使用过2.5版本的布局分析,整体比较好用.近期就尝试了一下paddleocr的新版本,记录一下尝鲜经历.2.6版本的公告中指出,布局分析模型缩小了95 ...

  8. 单元测试成神之路——Golang篇

    这位大佬写的太好了 https://zhangyuyu.github.io/golang-unit-test/

  9. XYZtoZXY

    Quaternion XYZtoZXY(Vector3 p) { Vector3 v = new Vector3(p.x, -p.y, -p.z); Quaternion qx = Quaternio ...

  10. Monstache的安装和使用

    一.什么是Monstache Monstache 是Golang语言实现的基于MongoDB的oplog实现实时数据同步及订阅的插件,支持MongoDB与ES之间的数据同步.其中MongoDB需要搭建 ...