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

声明在data里面的样式

tablePrint: {

// 自定义打印的样式示例

style: `

         .vxe-table {

                color: #000000; // 修改表格默认颜色

                font-size: 12px; // 修改表格默认字体大小

                font-family: "Microsoft YaHei",微软雅黑,

               "MicrosoftJhengHei",华文细黑,STHeiti,MingLiu; // 修改表格默认字体

                //border-collapse:collapse;//火狐不兼容

                border-collapse: unset;

           }

          .vxe-table,

         .vxe-table thead th,

         .vxe-table tbody td,

         .vxe-table tfoot td {

                         border-color: #000000; // 修改表格边框颜色

         }

        .vxe-table thead th {

                       color: green; // 修改表头字体颜色

                       font-size: 14px; // 修改表头默认字体大小

        }

       .vxe-table tfoot td { color: red; // 修改表尾字体颜色 } `

}

但是这种打印样式会在火狐浏览器上,表格框线丢失

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

猜你喜欢

转载自blog.csdn.net/weixin_48424997/article/details/121033888