css - 打印网页

Question

我有一个网页，其中包含一个动态填充的表格。此页需要打印出来以供记录。我遇到的问题是避免在 tr 中出现分页符。我花了很多时间在谷歌上搜索并尝试了很多东西，但我所能生成的只是一个页面，该页面没有在正确的位置中断，因此一些数据丢失了。我有一个简单的小打印 css 页面

.noprint{
display: none;
}
.printthis { 
display: block; 
} 
.data table{ 
page-break-inside:avoid;
}
.data tr{
page-break-inside:avoid;
}
.data thead{
display:table-header-group;
}
.data tbody{
display:table-body-group;
page-break-inside:avoid;
}
.data,
.data th,
.data td {
border:1px solid #000;
border-spacing:0;   
border-collapse:collapse; 
}
.data table,th, tbody, tr, td {
background-color:transparent;
padding: 0px;
margin: 0px;
}
a:link:after, #content a:visited:after {
content: " (" attr(href) ") ";
text-decoration: none;
font-size: 90%;
display: none;
}
a[href^="/"]:after {
text-decoration: none;
display: none;
}

我只是想打印出我已经完成的此表中的结果我只需要一点帮助让它在正确的位置中断。任何帮助表示赞赏

Answer 1

尝试插入一个带有额外属性的 css

media=print

<link type="stylesheet" href="../css path" media="print">

现在使用选项

window.print()

只有这个 css 会被激活并且你的打印页面会应用这个 css