1. table多级表头
table多级表头的实现主要借助下面两个属性：
rowspan: 表示表头跨几行
colspan: 表示表头跨几列
比如：实现下面的效果
截屏2020-04-27 上午8.52.25.png
表头一、表头二、表头三：跨了2行
表头四：跨了6列
表头5: 跨了2列
表头四（一）～ 表头四（六）则是正常的一列。
实现代码如下：
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th rowspan="2">表头一</th>
<th rowspan="2">表头二</th>
<th rowspan="2">表头三</th>
<th colspan="6" class="pinck-bg">表头四</th>
<th colspan="2" class="blue-bg">表头五</th>
</tr>
<tr>
<th class="pinck-bg">表头四（一）</th>
<th class="pinck-bg">表头四（二）</th>
<th class="pinck-bg">表头四（三）</th>
<th class="pinck-bg">表头四（四）</th>
<th class="pinck-bg">表头四（五）</th>
<th class="pinck-bg">表头四（六）</th>
<th class="blue-bg">表头五（一）</th>
<th class="blue-bg">表头五（二）</th>
</tr>
<tr>
<td align="center">item 1</td>
<td align="center">item 2</td>
<td align="center">item 3</td>
<td align="center">item 4</td>
<td align="center">item 5</td>
<td align="center">item 6</td>
<td align="center">item 7</td>
<td align="center">item 8</td>
<td align="center">item 9</td>
<td align="center">item 10</td>
<td align="center">item 11</td>
</tr>
</table>
因为表头一、表头二、表头三都是跨了两行，所以第二个<tr>里面的<th>是从表头四下面第二行开始排列的，也就是在表头三的右侧开始。
2. WebView底部空白处理
用webview加载html的时候，发现webview下部有很大块空白，其实这是因为html没有适配不同分辨率的移动设备导致的。只需要在html的头部添加下面的适配设置即可:
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
viewport是浏览器上用来显示网页的那部分区域，而每个设备的默认viewport是不同的，所以当直接拿没有适配的网页在移动端显示的时候，默认是使用了桌面浏览器的viewport，所以就出现空白或者滚动条之类的。
关于viewport可以参考这篇文章: 移动前端开发之viewport的深入理解
