谷歌浏览器table不规则表格使用rowspan/colspan导致线条粗细不同

背景

希望制作一张表格, 如下图, 但使用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>

谷歌浏览器table不规则表格使用rowspan/colspan导致线条粗细不同相关推荐

html 表格选择,html表格选择与colspan或rowspan
我有一个表,用户可以用鼠标选择行和列,然后将选定的区域合并到一个单元格中,它的工作原理就像ms单词表的行为一样.html表格选择与colspan或rowspan 但是,当表具有rowSpan或colS ...
html中table的colspan,表格中的colspan colspan
表格中的colspan colspan colspan 属性规定单元格可横跨的列数 colspan="2" rowspan 属性规定单元格可横跨的行数 rowspan=" ...
HTML快速入门5——不规则表格、表格背景、边框颜色
不规则表格例子: <table border=1> <tr><td>1,1</td><td>1,2</td><td> ...
layui table动态选中_layui后台管理—table 数据表格详细讲解
1.layui介绍 layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用,非常适合界面的快速开发.layui区别于那些基于MVVM底 ...
layui数据表格如何获取id_LayUI之table数据表格获取行、行高亮等相关操作
前言目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...
＜table＞＜/table＞表格标签的基本概念和基本属性
学习目标: 掌握<table></table>的使用和基本属性学习内容: 标签是用来创建 HTML 表格的简单的 HTML 表格由 table 元素以及一个或多个 tr(定 ...
＜table＞表格标签
标签基本结构: <table><tr><td>111</td> </tr> </table> 表格中常用的几种标签: capti ...
不规则表格如何导出到excel?
不规则表格如何导出到excel? function exp(){ var a=[ {"bumen":"研发部","zhiwu":" ...
VUE Table复杂表格生成带格式的excel（多表头、合并单元格、边框、居中、背景）
VUE Table复杂表格生成带格式的excel(多表头.合并单元格.边框.居中.背景) 因为工作需要,在网上找了很多都不太行无意之间看到一个大佬的打码拿过来改了改居然可以用! 原文链接:https: ...

谷歌浏览器table不规则表格使用rowspan/colspan导致线条粗细不同

背景

最初效果

最终效果

代码

谷歌浏览器table不规则表格使用rowspan/colspan导致线条粗细不同相关推荐

最新文章

热门文章