坚持学习打卡

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

2023-03-23  本文已影响0人  Moment929

还需要对表格重置下双边框问题
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;}

上一篇下一篇

猜你喜欢

热点阅读