简介：
在固定表头的时候，没有使用其他table组件，使用的是两个table叠加，遇到两个表头和表体的列很难对齐，经过不断摸索，发现完美对齐。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./layuinew/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
常用两级表头：
<table border="1px" style="width: 800px;" >
<thead>
<tr>
<th rowspan="2" style="width:10%;">联系人</th>
<th style="background-color: #5FB878; color: #fff;" colspan="3">地址</th>
<th rowspan="2" style="width:10%;">金额</th>
<th rowspan="2">操作</th>
</tr>
<tr>
<th style="width: 10%;" >省</th>
<th style="width: 10%;">市</th>
<th style="width: 30%;">区</th>
</tr>
</thead>
</table>
<table border="1px" style="width: 800px;table-layout:fixed;" >
<tbody>
<td style="width: 10%;" >省</td>
<td style="width: 10%;" >省1235</td>
<td style="width: 10%;" >省123</td>
<td style="width: 30%;" >省211111</td>
<td style="width: 10%;" >省11111</td>
<td style="" >省2222222222</td>
</tbody>
</table>
</body>
</html>效果:
总结：
1.设置两个表的宽度为800px，将表头的宽度设置为百分比，留一个宽度不用设置，它会占剩下的百分比，第二个table宽度设置一样。
2.第二个table需要加上table-layout:fixed;属性
3.大家有可能实现的效果和本文不同，是因为layui.css样式的影响。
3492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
