table表格的tr为什么不换行
为什么表格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>
v-for中rowspan="2"去掉就可以了，要不rowspan是合并行，会将不够的单元格提到上一行
<template>
<div ref="printHtml">
<div class="wraper">
<div>
<table 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>{{index}}</td>
<td>12</td>
<td>12</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td colspan="2">3</td>
<td>4</td>
<td>5</td>
<td>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>
因为head头部有两个tr标签
删除 中td的 colspan="2" 和 rowspan="2"
因为你表头有两个tr，所以下面也要配合写，所以每一行后面都要在加个
<template>
<a-button @click="doPrint">打印</a-button>
<div ref="printHtml">
<div class="wraper">
<div>
<table 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>
<td rowspan="2">1</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>
<tr></tr>
<tr>
<td rowspan="2">1</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>
<tr></tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
因为你声明了数据行也是rowspan=2，所以你的下一行数据就被塞进了合并行里，又由于前面20列已经被合并过了，所以数据塞进了从第21列开始的后面列里
把后面的所有rowspan都去掉就好了
要么就得在每个tr后面加个空tr，作为合并行，占个位置
只需要这样就可以了，把循环里面的rowspan=2去掉就可以了
<table 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>{{index}}</td>
<td>12</td>
<td>12</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td colspan="2">3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632