为什么表格table的tr不换行
<template>
<div ref="printHtml">
<div class="wraper">
<div>
<thttps://img-mid.csdnimg.cn/release/static/image/mid/ask/413267863266163.png "#left")
able border="1px" cellspacing="0" cellpadding="15px">
<thead>
<tr>
<th rowspan="2">1</th>
<th rowspan="2">2</th>
<th rowspan="2">3</th>
<th rowspan="2">4</th>
<th rowspan="2">5</th>
<th rowspan="2">6</th>
<th rowspan="2">7</th>
<th rowspan="2">8</th>
<th rowspan="2">9</th>
<th rowspan="2">0</th>
<th rowspan="2">11</th>
<th rowspan="2">12</th>
<th rowspan="2">13</th>
<th rowspan="2">14</th>
<th rowspan="2">15</th>
<th colspan="2">16</th>
<th rowspan="2">17</th>
<th rowspan="2">18</th>
<th rowspan="2">操作</th>
</tr>
<tr>
<th>辅A</th>
<th>辅B</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in data" :key="index">
<td rowspan="2">{{index}}</td>
<td rowspan="2">12</td>
<td rowspan="2">12</td>
<td rowspan="2">1</td>
<td rowspan="2">2</td>
<td rowspan="2">2</td>
<td rowspan="2">2</td>
<td rowspan="2">2</td>
<td rowspan="2">3</td>
<td rowspan="2">2</td>
<td rowspan="2">3</td>
<td rowspan="2">3</td>
<td rowspan="2">3</td>
<td rowspan="2">3</td>
<td rowspan="2">3</td>
<td colspan="2" rowspan="2">3</td>
<td rowspan="2">4</td>
<td rowspan="2">5</td>
<td rowspan="2">6</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
import { reactive, ref } from "vue";
export default {
setup() {
const data = [
{
"1": 40,
"2": 3077,
"3": null,
"4": null,
"5": null,
"6": null,
"7": 2,
"8": 8300,
"9": 0,
"10": null,
"11": null,
"12": null,
"13": "PP11",
"14": 40,
"15": 3000,
"16": 18,
"17": 7,
"18": [
"11220303201"
],
"19": [
"SN25-ZJ-FY1-BF"
],
},
{
"1": 40,
"2": 3077,
"3": null,
"4": null,
"5": null,
"6": null,
"7": 2,
"8": 8300,
"9": 0,
"10": null,
"11": null,
"12": null,
"13": "PP11",
"14": 40,
"15": 3000,
"16": 18,
"17": 7,
"18": [
"11220303201"
],
"19": [
"SN25-ZJ-FY1-BF"
],
},
{
"1": 40,
"2": 3077,
"3": null,
"4": null,
"5": null,
"6": null,
"7": 2,
"8": 8300,
"9": 0,
"10": null,
"11": null,
"12": null,
"13": "PP11",
"14": 40,
"15": 3000,
"16": 18,
"17": 7,
"18": [
"11220303201"
],
"19": [
"SN25-ZJ-FY1-BF"
],
},
{
"1": 40,
"2": 3077,
"3": null,
"4": null,
"5": null,
"6": null,
"7": 2,
"8": 8300,
"9": 0,
"10": null,
"11": null,
"12": null,
"13": "PP11",
"14": 40,
"15": 3000,
"16": 18,
"17": 7,
"18": [
"11220303201"
],
"19": [
"SN25-ZJ-FY1-BF"
],
},
]
return {
data,
};
},
};
</script>
<style lang="scss" scoped>
.table {
border: none;
border-collapse: collapse;
background: white;
text-align: center;
margin-top: 10px;
thead {
tr {
color: white;
height: 30px;
th {
background-color: rgba(255, 140, 45, 0.44);
min-width: 100px;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 3;
border: 1px solid rgba(0, 0, 0, 0.1);
}
}
}
tbody {
tr {
height: 30px;
color: black;
td {
border: 1px solid rgba(0, 0, 0, 0.1);
position: -webkit-sticky;
position: sticky;
min-width: 100px;
}
}
}
}
</style>
