如何让两个表格的部分列对应且缩放一致
先看效果
使用一个原生table的即可实现
- “两个”表格的视觉效果
- 让“两个”表格的对应列缩放保持一致
废话不多说,直接上代码
html:
<html>
<div>
<table>
<caption class="table-name">表格1111111</caption>
<tbody>
<tr>
<th scope="col">序号</th>
<th scope="col">名称</th>
<th scope="col" style="width: 100px">单位</th>
<th scope="col">数量1</th>
<th scope="col">数量2</th>
</tr>
<tr>
<td>1</td>
<td>笔记本</td>
<td>本</td>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>2</td>
<td>笔</td>
<td>只</td>
<td>100</td>
<td>200</td>
</tr>
</tbody>
<tfoot>
<!-- 此行仅分割用 -->
<tr style="display:block;height:20px"></tr>
<tr>
<td class="none"></td> <!-- 占位 -->
<td class="none"></td> <!-- 占位 -->
<td class="none">编号</td>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td class="none"></td> <!-- 占位 -->
<td class="none"></td> <!-- 占位 -->
<td class="none">铅封号</td>
<td>202410251555555555</td>
<td>202410251555555555</td>
</tr>
</tfoot>
</table>
</div>
</html>
css:
table{
margin-top: 20px;
width: 100%;
border-spacing: 0;
color: #606266;
}
.table-name{
text-align: left;
font-size: 16px;
margin-bottom: 8px;
font-weight: 600;
}
th,td{
text-align: center;
border-bottom: 1px solid #eeeeee;
border-left: 1px solid #eeeeee;
padding: 4px 0;
}
th:last-child,td:last-child{
border-right: 1px solid #eeeeee;
}
th{
border-top: 1px solid #eeeeee;
background: #f8faff;
}
tfoot tr:nth-child(2){
td{
border-top: 1px solid #eeeeee;
}
}
.none{
border: none !important;
}
闲话
这是开发中遇到的一个需求,原需求两个表格后面的列是动态的(可能有数量1、数量2、数量3…),下面个表格的列需要和上面的同步,所以想了这么个办法。
个人认为点睛之笔就是那个空白的tr。