背景
希望制作一张表格, 如下图, 但使用rowspan/colspan后导致绘制的表格线条重叠, 导致有些线条粗有些线条细.
ps: 只有使用谷歌浏览器时有这个问题, 使用火狐等浏览器时线条显示均正常.
最初效果
最终效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>苍南乐果包装生产计划单</title>
<style>
table{
border-left:2px solid black;
border-bottom: 2px solid black;
}
table td, table th{
width: 100px;
border-right:2px solid black;
border-top: 2px solid black;
}
.fs20 {
font-size: 20px;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<thead>
<th colspan="8" class="fs20">苍南乐果包装生产计划单</th>
</thead>
<tbody>
<tr>
<td>客户名称</td>
<td></td>
<td>订货日期</td>
<td></td>
<td>编号</td>
<td colspan="3"></td>
</tr>
<tr>
<td>产品名称</td>
<td colspan="2"></td>
<td>交货日期</td>
<td colspan="4"></td>
</tr>
<tr>
<td>订货数量</td>
<td></td>
<td>数量控多</td>
<td>最多</td>
<td></td>
<td>最少</td>
<td colspan="2"></td>
</tr>
<tr>
<td>条形码</td>
<td colspan="2"></td>
<td>内容物</td>
<td colspan="4"></td>
</tr>
<tr>
<td>产品规格</td>
<td colspan="7"></td>
</tr>
<tr>
<td rowspan="5">材料结构</td>
<td>层数</td>
<td>材料名称</td>
<td>模宽 (cm)</td>
<td>厚度 (s)</td>
<td>供应商</td>
<td>重量</td>
<td>米数</td>
</tr>
<tr>
<td>第一层</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>第二层</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>第三层</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>第四层</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="5">印刷顺序</td>
<td>版号</td>
<td></td>
<td>板规格</td>
<td></td>
<td>白墨面积</td>
<td colspan="2"></td>
</tr>
<tr>
<td>印刷基材</td>
<td></td>
<td>排版方式</td>
<td></td>
<td>色墨面积</td>
<td colspan="2"></td>
</tr>
<tr>
<td>印刷颜色</td>
<td colspan="4"></td>
<td>油墨类型</td>
<td></td>
</tr>
<tr>
<td colspan="2">新, 老版, 改版内容</td>
<td></td>
<td>新版</td>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="7">印刷</td>
</tr>
<tr>
<td rowspan="4">复合工序</td>
<td>第一层胶水</td>
<td colspan="2"></td>
<td>网锟线数</td>
<td></td>
<td>胶水配比</td>
<td></td>
</tr>
<tr>
<td>第二层胶水</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>胶水配比</td>
<td></td>
</tr>
<tr>
<td>第三层胶水</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>胶水配比</td>
<td></td>
</tr>
<tr>
<td>复合要求</td>
<td colspan="4"></td>
<td>熟化时间</td>
<td></td>
</tr>
<tr>
<td rowspan="5">制袋工序</td>
<td>上封口</td>
<td colspan="5"></td>
<td rowspan="7"></td>
</tr>
<tr>
<td>下封口</td>
<td></td>
<td>背封</td>
<td></td>
<td>类型</td>
<td></td>
</tr>
<tr>
<td>打孔要求</td>
<td colspan="2"></td>
<td>打孔位置</td>
<td colspan="2"></td>
</tr>
<tr>
<td>斯口型号</td>
<td colspan="2"></td>
<td>斯口位置</td>
<td colspan="2"></td>
</tr>
<tr>
<td>拉链位置</td>
<td colspan="2"></td>
<td>包装箱</td>
<td colspan="2"></td>
</tr>
<tr>
<td>其他要求</td>
<td colspan="6"></td>
</tr>
<tr>
<td rowspan="2">分切工序</td>
<td>分切宽度</td>
<td></td>
<td>cm</td>
<td>分切直径</td>
<td></td>
<td>cm</td>
</tr>
<tr>
<td>出卷方向</td>
<td colspan="6"></td>
</tr>
<tr>
<td>备注</td>
<td colspan="7"></td>
</tr>
<tr>
<td>经办人</td>
<td></td>
<td>审核</td>
<td colspan="2"></td>
<td colspan="2"></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
