I want to make a report that can be print

我想做一份可以打印的报告

enter image description here

在此处输入图像描述

but the table below is not closed because the sentence is still continue on the second page, how do I add a horizontal line so that the table can be closed even though the sentence is still continue to the next page

但是下面的表格没有关闭，因为句子仍然在第二页继续，我如何添加一条水平线，这样即使句子仍然继续到下一页，表格也可以关闭

i already add this syntax in @media print
.page-break {page-break-after: always;}
but still not work

我已经在@media print中添加了这个语法。Page-Break{Page-Break-After：Always；}但仍然不起作用

can someone help me

有人能帮帮我吗？

tl;dr; there aare some hack-y solutions, some info provided below. Your best bet is jsPDF or a similar library though.

有一些黑客解决方案，下面提供了一些信息。不过，最好的选择是jsPDF或类似的库。

The issue you're facing is a common one when dealing with printing HTML tables. The CSS property break-inside: avoid; can help to prevent breaks within an element, but it's not always reliable, especially when dealing with tables.

在处理打印HTML表格时，您面临的问题很常见。Css属性Break-Inside：Avide；可以帮助防止元素中的中断，但它并不总是可靠的，尤其是在处理表格时。

Here's a solution that might work for you:

这里有一个可能对你有用的解决方案：

1. Ensure you're using the tbody in your table structure.

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <!-- More headers -->
    </tr>
  </thead>
  <tbody>
    <!-- Your table data here -->
  </tbody>
</table>

2. Apply the following CSS:

@media print {
  thead {display: table-header-group;}
  tr {page-break-inside: avoid;}
  tbody::after {
    content: '';
    display: block;
    border-bottom: 1px solid black;
  }
}

This CSS will ensure that your table header (thead) is displayed at the top of each printed page (JIC you don't have that/want it. Add/remove as desired of course). The page-break-inside: avoid; rule will attempt to prevent page breaks within table rows. The border-bottom on tbody::after will create a line underneath the last table row. Although it may lead to an extra line in the cases of not breaking on a cell.

此css将确保您的表格标题(标题)显示在每个打印页的顶部(JIC您没有/想要它。当然，根据需要添加/删除)。Page-Break-Inside：Avide；规则将尝试防止表格行中的分页符。TBody：：After上的边框底部将在最后一行表下创建一条线。尽管在不破坏细胞的情况下，这可能会导致额外的行。

Alternatively, consider adding a footer to your tables:

或者，考虑在表中添加页脚：

Use thead and tfoot in your table structure. This will ensure that your table header and footer are repeated on each printed page.

在你的表格结构中使用头和脚。这将确保您的表格页眉和页脚在每个打印页上重复。

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <!-- More headers as needed -->
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="100%">*** End of Page ***</td>
    </tr>
  </tfoot>
  <tbody>
    <!-- Your table data here -->
  </tbody>
</table>

2. Apply the following CSS:

@media print {
  thead {display: table-header-group;}
  tfoot {display: table-row-group;}
  tr {page-break-inside: avoid;}
}

This CSS will ensure that your table header (thead) is displayed at the top of each printed page, and your table footer (tfoot) is displayed at the bottom. The page-break-inside: avoid; rule will attempt to prevent page breaks within table rows.

此css将确保您的表格页眉(标题)显示在每个打印页的顶部，而表格页脚(TFoot)显示在底部。Page-Break-Inside：Avide；规则将尝试防止表格行中的分页符。

Please note that browser support for these features can be inconsistent, especially when it comes to printing. You may need to experiment with different approaches to get the desired result.

请注意，浏览器对这些功能的支持可能不一致，尤其是在打印方面。您可能需要尝试不同的方法才能获得所需的结果。

If you're still having trouble, you might consider using a library like jsPDF to generate a PDF version of your table. This would give you more control over the printed output.

如果仍然有问题，可以考虑使用像jsPDF这样的库来生成表的PDF版本。这将使您能够更好地控制打印输出。