vue打印机打印时elementui表格样式有问题

人造表格

代码

class="exam-table">
    
class="exam-tr">
        
class="exam-th num">序号
        
class="exam-th wnum">f
        
class="exam-th uname">d
        
class="exam-th audi">e
        
class="exam-th fetc">w
        
class="exam-th refee">c
        
class="exam-th chc">h
        
class="exam-th score">w
    
    
class="exam-tr"  v-for="(item, index) in printData.examStudentScoreList" :key="index">
        
class="exam-td num">{{index+1}}
        
class="exam-td wnum">{{item.wnumber}}
        
class="exam-td uname">{{item.unamee}}
        
class="exam-td audi">{{item.audiScore}}
        
class="exam-td fetc">{{item.fetcScore}}
        
class="exam-td refee">{{item.refeeScore}}
        
class="exam-td chc">{{item.chcingScore}}
        
class="exam-td score">{{item.totalScore}}
    

样式

.exam-table{
font-size: 1rem;
margin-top: 1.8rem;
}
.exam-tr{
display: flex;
justify-content: space-around;
text-align: center;
.num{
    width: 8%;
}
.wnum{
    width: 20%;
}
.uname{
    width: 11%;
}
.audi{
    width: 12%;
}
.fetc{
    width: 12%;
}
.refee{
    width: 12%;
}
.chc{
    width: 12%;
}
.score{
    width: 13%;
}
}
.exam-th{
font-weight: bold;
line-height: 2.8rem;
border: 1px solid #ccc;
}
.exam-td{
line-height: 2.2rem;
border: 1px solid #ccc;
}