vue项目中table火狐浏览器打印样式表格框线丢失

还需要对表格重置下双边框问题
table {
border-spacing: 0; // 设置相邻单元格的边框间的距离 (仅用于“边框分离”模式)
border-collapse: unset; (collapse/separate)
border: 1px solid #000;
}
collapse 相邻的单元格共用同一条边框 (此属性火狐不兼容)
separate 每个单元格拥有独立的边框
这样在打印预览中,就可以发现边框线出来了

需要把 border-collapse:collapse; 改为border-collapse: unset;

浏览器兼容CSS 样式浏览器前缀兼容性写法、生效写法:
-moz- /* 火狐等使用Mozilla浏览器引擎的浏览器 */

-webkit- /* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */

-o- /* Opera浏览器(早期) */

-ms- /*IE浏览器 */

所以最后兼容浏览器的写法

.confluenceTable{border-collapse:collapse;-moz-border-collapse:unset;}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容