极客观点
项目管理
HarmonyOS
如题，当HTML在浏览器中打印预览的时候，Table在遇到分页的时候会多出来一根横线，这并不是每次分页都会多一根横线出来，我猜测可能和打印的机制有关系。
下面是HTML代码，大家可以将HTML在浏览器中打开，然后打印预览，你可以看到多出来一根横线。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
width: 95%;
margin: 0;
overflow: auto;
font-size: 16px;
font-weight: 400;
padding: 0 2px;
color: rgba(0, 0, 0, .85);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
ul,
ol {
padding-left: 40px;
}
img {
vertical-align: inherit;
}
table th,
table td {
padding: 0.4rem;
}
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0;
margin-inline-end: 0;
}
@page {
size: A4;
margin: 30mm 10mm;
}
@media print {
body {
min-width: 1070px;
}
.mce-pagebreak {
page-break-after: always;
}
tr, td, th, tbody, thead, tfoot {
page-break-inside: avoid !important;
}
table {
max-width: 95%;
page-break-before: auto;
}
tr {
page-break-before: auto;
page-break-inside: avoid;
page-break-after: auto
}
thead {
display: table-header-group
}
tfoot {
display: table-footer-group
}
}
</style>
</head>
<body>
<p style="text-align: center;"><span style="font-size: 20px; font-family: arial, helvetica, sans-serif;"><strong>DEBIT NOTE/TAX INVOICE</strong></span></p>
<p style="text-align: center;"> </p>
<table style="border-collapse: collapse; width: 100%; height: 142px; margin-left: auto; margin-right: auto;" width="100%">
<tbody>
<tr style="height: 20px;">
<td style="width: 38.4798%; text-align: left; height: 20px;" width="149"><span style="font-family: arial, helvetica, sans-serif; font-size: 16px;"><span style="color: rgba(0, 0, 0, 0.85); font-family: arial, helvetica, sans-serif; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">ATTENTION: ABC</span></span></td>
<td style="width: 42.165%; height: 20px; text-align: right;" width="63"><span style="font-family: arial, helvetica, sans-serif; font-size: 16px;">DEBIT NOTE NUMBER: DN3000000249</span></td>
</tr>
<tr style="height: 20px;">
<td style="width: 38.4798%; text-align: left; height: 20px;"><span style="font-family: arial, helvetica, sans-serif; font-size: 16px;">ABC</span></td>
<td style="width: 42.165%; height: 20px; text-align: right;"><span style="font-family: arial, helvetica, sans-serif; font-size: 16px;">INVOICE DATE: 27 Jul 2022</span></td>
</tr>
<tr style="height: 20px;">
<td style="width: 38.4798%; text-align: left; height: 20px;"><span style="font-family: arial, helvetica, sans-serif; font-size: 16px;">35B LIANG SEAH STREET</span></td>
<td style="width: 42.165%; text-align: right; height: 20px;"><span style="font-family: arial, helvetica, sans-serif; font-size: 16px;">DUE DATE: 25 Oct 2022</span></td>
</tr>
<tr style="height: 20px;">
<td style="width: 38.4798%; text-align: left; height: 20px;"><span style="font-family: arial, helvetica, sans-serif; font-size: 16px;">SINGAPORE 189056</span></td>
<td style="width: 42.165%; text-align: right; height: 20px;"><span style="font-family: arial, helvetica, sans-serif; font-size: 16px;">POLICY NUMBER: 2100000237</span></td>
</tr>
<tr style="height: 20px;">
<td style="width: 38.4798%; text-align: left; height: 20px;"><span style="font-family: arial, helvetica, sans-serif; font-size: 16px;"></span></td>
<td style="width: 42.165%; text-align: right; height: 20px;"><span style="font-family: arial, helvetica, sans-serif;">VIRTUAL ACCOUNT: 2100000237</span></td>
</tr>
<tr style="height: 22px;">
<td style="width: 38.4798%; text-align: left; height: 22px;"><span style="font-family: arial, helvetica, sans-serif; font-size: 16px;"></span></td>
<td style="width: 42.165%; text-align: right; height: 22px;"> </td>
</tr>
<tr style="height: 20px;">
<td style="width: 38.4798%; text-align: left; height: 20px;"> </td>
<td style="width: 42.165%; text-align: right; height: 20px;"> </td>
</tr>
</tbody>
</table>
<table style="border-collapse: collapse; width: 100%; height: 111px; border-color: #000000; border-style: none; margin-left: auto; margin-right: auto;" border="0" width="100%">
<tbody>
<tr style="height: 21px;">
<td style="width: 69.94%; height: 21px; text-align: center; background-color: #000000; border: 1px solid #000000;" scope="col" width="490"><span style="font-size: 20px; color: #ecf0f1; font-family: arial, helvetica, sans-serif;"><strong>PARTICULARS</strong></span></td>
<td style="width: 23.7649%; height: 21px; text-align: center; background-color: #000000; border: 1px solid #000000;" width="490"><span style="font-size: 20px; color: #ecf0f1; font-family: arial, helvetica, sans-serif;"><strong>TOTAL (SGD)</strong></span></td>
</tr>
<tr style="height: 21px;">
<td style="width: 69.94%; height: 21px; border: 1px solid #000000;" scope="col" width="490">
<p><span style="font-family: arial, helvetica, sans-serif; font-size: 20px;">Group Term Life</span></p>
<p> </p>
<p> </p>
<p><span style="font-size: 20px; font-family: arial, helvetica, sans-serif;">PREMIUM</span></p>
<p><span style="font-size: 20px; font-family: arial, helvetica, sans-serif;">GST</span></p>
<p> </p>
<p> </p>
<p><span style="font-size: 20px; font-family: arial, helvetica, sans-serif;">TOTAL PREMIUM</span></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</td>
<td style="width: 23.7649%; height: 21px; vertical-align: top; border: 1px solid #000000;" width="490">
<p><span style="font-size: 20px;"> </span></p>
<p> </p>
<p> </p>
<p style="text-align: right;"><span style="font-size: 20px; font-family: arial, helvetica, sans-serif;"><span style="color: #000000;">334,259.25</span></span></p>
<p style="text-align: right;"><span style="font-size: 20px; font-family: arial, helvetica, sans-serif;"><span style="color: #000000;">0.00</span></span></p>
<p style="text-align: right;"> </p>
<p style="text-align: right;"><span style="text-decoration: underline; font-family: arial, helvetica, sans-serif; font-size: 20px;"> </span></p>
<p style="text-align: right;"><span style="font-size: 20px; font-family: arial, helvetica, sans-serif;"><span style="color: #000000;">334,259.25</span></span></p>
<p style="text-align: right;"><span style="font-size: 20px; font-family: arial, helvetica, sans-serif;">=================</span></p>
<p style="text-align: right;"> </p>
<p style="text-align: right;"> </p>
<p style="text-align: right;"> </p>
<p style="text-align: right;"> </p>
</td>
</tr>
<tr style="height: 43px;">
<td style="width: 93.7049%; height: 43px; background-color: #000000; border: 1px solid #000000;" colspan="2" scope="col" width="490"><span style="font-size: 20px; color: #ecf0f1; font-family: arial, helvetica, sans-serif;">This debit note serves as the 'TAX INVOICE' for the purpose of GST. GST REG NO.: M90372806G</span></td>
</tr>
</tbody>
</table>
<p style="text-align: left;"> </p>
<p style="text-align: left;"> </p>
<p style="text-align: left;">
<p><span style="font-size: 20px; font-family: arial, helvetica, sans-serif; margin-left: 3%;"><b>INSTALMENT BILLINGS</b></span></p>
<table style="border-collapse: collapse; width: 100%; margin-left: auto; margin-right: auto;" width="100%" border="1">
<tbody>
<tr>
<td style="width: 30%;background-color: #000000;"><strong><span style="font-size: 20px;color: #ecf0f1;">INVOICE DATE</span></strong>
</td>
<td style="width: 23.3333333333%;background-color: #000000;"><strong><span
style="font-size: 20px;color: #ecf0f1;">PREMIUM</span></strong>
</td>
<td style="width: 23.3333333333%;background-color: #000000;"><strong><span
style="font-size: 20px;color: #ecf0f1;">GST</span></strong>
</td>
<td style="width: 23.3333333333%;background-color: #000000;"><strong><span
style="font-size: 20px;color: #ecf0f1;">TOTAL(SGD)</span></strong>
</td>
</tr>
<tr>
<td style="width: 30%;"><span style="font-size: 20px;">25 Nov 2022</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 334,259.25</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 0.00</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 334,259.25</span>
</td>
</tr>
<tr>
<td style="width: 30%;"><span style="font-size: 20px;">26 Dec 2022</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 334,259.25</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 0.00</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 334,259.25</span>
</td>
</tr>
<tr>
<td style="width: 30%;"><span style="font-size: 20px;">25 Jan 2023</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 334,259.25</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 0.00</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 334,259.25</span>
</td>
</tr>
<tr>
<td style="width: 30%;"><span style="font-size: 20px;">25 Feb 2023</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 334,259.25</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 0.00</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 334,259.25</span>
</td>
</tr>
<tr>
<td style="width: 30%;"><span style="font-size: 20px;">27 Mar 2023</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 334,259.25</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 0.00</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 334,259.25</span>
</td>
</tr>
<tr>
<td style="width: 30%;"><span style="font-size: 20px;">27 Apr 2023</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 334,259.25</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 0.00</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 334,259.25</span>
</td>
</tr>
<tr>
<td style="width: 30%;"><span style="font-size: 20px;">28 May 2023</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 334,259.25</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 0.00</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 334,259.25</span>
</td>
</tr>
<tr>
<td style="width: 30%;"><span style="font-size: 20px;">25 Jun 2023</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 334,259.25</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 0.00</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 334,259.25</span>
</td>
</tr>
<tr>
<td style="width: 30%;"><span style="font-size: 20px;">26 Jul 2023</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 334,259.25</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 0.00</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 334,259.25</span>
</td>
</tr>
<tr>
<td style="width: 30%;"><span style="font-size: 20px;">25 Aug 2023</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 334,259.25</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 0.00</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 334,259.25</span>
</td>
</tr>
<tr>
<td style="width: 30%;"><span style="font-size: 20px;">25 Sep 2023</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 334,259.25</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 0.00</span>
</td>
<td style="width: 23.3333333333%" align="right"><span style="font-size: 20px;">S$ 334,259.25</span>
</td>
</tr>
</tbody>
</table>
</p>
<p style="text-align: center;"> </p>
</body>
</html>
去掉勾选【页面页脚】和【背景图形】试一下？