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

人造表格

代码

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

样式

.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;
}