Css 打印预览页面中间的表格分隔符 < P>我想在表中打印数据，但是在查看打印预览时，表中断发生在页面中间，并在它们之间有一定的空间开始一个新的表。
如果我对表格使用分页符，则会出现以下问题（如图所示） 若我对表格行使用分页符，那个么下面的问题（在图片中指出）就会消失，表格行在内部被打断Css 打印预览页面中间的表格分隔符 < P>我想在表中打印数据，但是在查看打印预览时，表中断发生在页面中间，并在它们之间有一定的空间开始一个新的表。,css,printing,printing-web-page,Css,Printing,Printing Web Page,如果我对表格使用分页符，则会出现以下问题（如图所示） 若我对表格行使用分页符，那个么下面的问题（在图片中指出）就会消失，表格行在内部被打断 HTML代码： <ng-container *ngIf="scheduleType == 'comparison'"> <div class="row"> <div class="col-md-12"> <div class="card">
HTML代码：<ng-container *ngIf="scheduleType == 'comparison'">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<table class="table work-packages">
<tr class="header" style="text-align:center;">
<th colspan="3" i18n="@@activityName">Activity Name</th>
<th i18n="@@plannedStartDate">Planned Start Date</th>
<th i18n="@@plannedEndDate">Planned End Date</th>
<th i18n="@@actualStartDate">Actual Start Date</th>
<th i18n="@@actualEndDate">Actual End Date</th>
<th i18n="@@float">Float</th>
<th i18n="@@status">status</th>
<th i18n="@@amountOfWorkRemaining">Physical Complete</th>
</tr>
<tbody>
<ng-container *ngFor="let workPackage of $workPackages | async">
<tr class="workPackages">
<td colspan="3">{{ workPackage.name }}</td>
<td>
<span *ngIf="workPackage.work_package_details[1]">
{{(workPackage.work_package_details[1]?.start_date)? (workPackage.work_package_details[1]?.start_date|convertToJalaliDate):
'----'}}
</span>
<span *ngIf="!workPackage.work_package_details[1]">----</span>
</td>
<td>
<span *ngIf="workPackage.work_package_details[1]">
{{(workPackage.work_package_details[1]?.end_date)? (workPackage.work_package_details[1]?.end_date|convertToJalaliDate): '----'}}
</span>
<span *ngIf="!workPackage.work_package_details[1]">----</span>
</td>
<td>
<span *ngIf="workPackage.work_package_details[0]">
{{(workPackage.work_package_details[0]?.start_date)? (workPackage.work_package_details[0]?.start_date|convertToJalaliDate):'----'}}
</span>
<span *ngIf="!workPackage.work_package_details[0]">----</span>
</td>
<td>
<span *ngIf="workPackage.work_package_details[0]">
{{(workPackage.work_package_details[0]?.end_date)? (workPackage.work_package_details[0]?.end_date|convertToJalaliDate): '----'}}
</span>
<span *ngIf="!workPackage.work_package_details[0]">----</span>
</td>
<td>{{workPackage.float}}</td>
<td>
<span class="badge badge-secondary" *ngIf="workPackage.work_package_details[0]?.status == 0">Not Started</span>
<span class="badge badge-warning" *ngIf="workPackage.work_package_details[0]?.status == 1">In Progress</span>
<span class="badge badge-success" *ngIf="workPackage.work_package_details[0]?.status == 2">Completed</span>
</td>
<td>
{{(workPackage.work_package_details[0]?.completion_percentage > 0)? workPackage.work_package_details[0]?.completion_percentage
: 0}}%
</td>
</tr>
<ng-container *ngIf="workPackage?.subtasks">
<tr class="subtask" *ngFor="let subtask of workPackage.subtasks">
<td colspan="3">{{ subtask.name }}</td>
<td>
<span *ngIf="subtask.planned_subtask != null">
{{subtask.planned_subtask?.start_date | convertToJalaliDate}}
</span>
<span *ngIf="subtask.planned_subtask == null">----</span>
</td>
<td>
<span *ngIf="subtask.planned_subtask != null">
{{subtask.planned_subtask?.end_date | convertToJalaliDate}}
</span>
<span *ngIf="subtask.planned_subtask == null">----</span>
</td>
<td>
{{subtask?.start_date | convertToJalaliDate}}
</td>
<td>
{{subtask?.end_date | convertToJalaliDate}}
</td>
<td>{{subtask.float}}</td>
<td>
<span class="badge badge-secondary " *ngIf="subtask.status==0">Not Started</span>
<span class="badge badge-warning " *ngIf="subtask.status==1">Started</span>
<span class="badge badge-success" *ngIf="subtask.status==2">Completed</span>
</td>
<td>
{{(subtask.completion_percentage > 0)? subtask.completion_percentage : 0}}%
</td>
</tr>
</ng-container>
</ng-container>
</tbody>
</table>
</div>
</div>
</div>
</div>
</ng-container>
@import '~bootstrap/scss/functions';
@import '~style/variables';
table th,
td {
border: 1px solid black !important;
}
@media print {
table {
page-break-after: auto
}
// tr {
// page-break-inside: avoid;
// page-break-after: always
// }
}
.table tr.subtask td:nth-child(1) {
padding-left: 25px !important;
}
.table tr.subtask td.milestone {
padding-left: 20px !important;
}
.table td {
font-size: 10px !important;
text-align: left !important;
vertical-align: inherit !important
}
.table th {
font-size: 0.7rem !important;
}
.table .workPackages {
background-color: #3f51b5;
color: #fff;
}
.header {
border-radius: 2px !important;
background-color: rgba(0, 0, 0, 0.9) !important;
color: rgba(250, 250, 250, 0.9) !important;
}
活动名称
计划开始日期
计划结束日期
实际开始日期
实际结束日期
浮动
地位
身体完整
{{workPackage.name}
{（工作包.工作包详细信息[1]？.start\u日期）？（工作包.工作包详细信息[1]？.start\u日期| convertToJalaliDate）：
'----'}}
----
{（工作包.工作包详细信息[1]？.end\u日期）？（工作包.工作包详细信息[1]？.end\u日期| convertToJalaliDate）：'---}
----
{{（workPackage.work\u package\u details[0]？.start\u date）？（workPackage.work\u package\u details[0]？.start\u date | convertToJalaliDate）：'---}
----
{{（workPackage.work_package_details[0]？.end_date）？（workPackage.work_package_details[0]？.end_date|convertToJalaliDate）：'---}
----
{{workPackage.float}
没有开始
进行中
完整的
{（工作包.工作包详细信息[0]？.completion\u percentage>0）？工作包.工作包详细信息[0]？.completion\u percentage
: 0}}%
{{subtask.name}
{{子任务.计划的子任务？.开始日期{convertToJalaliDate}}
----
{{子任务。计划的子任务？.end_date{convertToJalaliDate}}
----
{{子任务？.start|date | convertToJalaliDate}}
{{子任务？结束日期{convertToJalaliDate}}
{{subtask.float}
没有开始
起动
完整的
{（子任务完成百分比>0）？子任务完成百分比：0}}
@导入“~bootstrap/scss/functions”；
@导入“~style/variables”；
表th，
运输署{
边框：1px纯黑！重要；
}
@媒体印刷品{
桌子{
自动后分页符
}
//tr{
//内部分页符：避免；
//分页符：始终
// }
}
.table tr.子任务td:n个子任务（1）{
左侧填充：25px！重要；
}
.表tr.子任务td.里程碑{
左侧填充：20px！重要；
}
.表td{
字体大小：10px！重要；
文本对齐：左！重要；
垂直对齐：继承！重要
}
.表th{
字体大小：0.7rem！重要；
}
.表.工作包{
背景色：#3f51b5；
颜色：#fff；
}
.标题{
边界半径：2px！重要；
背景色：rgba（0,0,0,0.9）！重要；
颜色：rgba（2502502500.9）！重要；
}
请分享更详细的代码。@amanI刚刚更新了问题，并添加了详细的代码，可能是重复的