打印时每页末尾有边框

问题描述 投票:0回答:1

我想在每个页面的末尾添加边框,下面是我的代码。

我尝试过 page-break-inside: auto;但由于此页面从第二页开始,下面是我的 html 结构。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Care Plan Printing Sample</title>
  <style>
    @media print {
      @page {
        size: A4 landscape;
        margin: 10mm;
      }
    }
  </style>
</head>
<body>
  <h1>Care Plan Report</h1>
  <div class="content">
    <table class="table table2">
      <tr>
        <td class="left-align"><h6>Resident Name: Test</h6></td>
        <td class="right-align"><h6>Care Plan Issue Date: 11-12-2024</h6></td>
      </tr>
      <tr>
        <td class="left-align"><h6>Bed No / Room No: A10/104</h6></td>
        <td class="right-align"><h6>Responded By: hvcbbjdhdgbvc</h6></td>
      </tr>
      <tr>
        <td class="left-align"><h6>Register Date: 11-12-2024</h6></td>
        <td></td> <!-- Empty right cell for alignment -->
      </tr>
    </table>
    <table class="table mt-4 table3">
      <thead>
        <tr>
          <th style="width:10%!important">Category</th>
          <th style="width:20%!important">Goal</th>
          <th style="width:35%!important">Plan</th>
          <th style="width:20%!important">Schedule</th>
          <th style="width:15%!important">Evaluation</th>
        </tr>
      </thead>
      <tbody>
         <tr>
            <td>G1</td>
            <td>G1</td>
            <td>G1</td>
            <td>G1</td>
            <td>G1</td>
         </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

目前它看起来像这样enter image description here如果我添加 page-break-inside: auto;然后它看起来像这样enter image description here

提前致谢。

javascript html jquery css
1个回答
0
投票

仅仅给页面添加边框不是不起作用吗?

<style>
   @media print {
      @page {
        size: A4 landscape;
        margin: 10mm;
        border-bottom: 1px solid;
      }
    }
</style>
© www.soinside.com 2019 - 2024. All rights reserved.