javascript - Border at the end of each Page in print

I want to add border at the end of each page below is my code.

I have tried page-break-inside: auto; but due to this page starts from 2nd page below is my html structure.

<!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>

Currently it looks like this if I add page-break-inside: auto; then it look like this .

Thanks in advance.

I want to add border at the end of each page below is my code.

I have tried page-break-inside: auto; but due to this page starts from 2nd page below is my html structure.

<!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>

Currently it looks like this if I add page-break-inside: auto; then it look like this .

Thanks in advance.

Share Improve this question asked Jan 20 at 15:23 Sukhwinder Sodhi 4751 gold badge4 silver badges19 bronze badges

Just like the <thead> with its borders is repeated at the top of every page, a <tfoot> with its borders is repeated at the bottom. Introduce a suitable <tfoot> into your table. – Heiko Theißen Commented Jan 20 at 16:21
Hi @HeikoTheißen I tried but its coming only on second page – Sukhwinder Sodhi Commented Jan 20 at 16:52

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

Isn't just adding a border to page not working?

<style>
   @media print {
      @page {
        size: A4 landscape;
        margin: 10mm;
        border-bottom: 1px solid;
      }
    }
</style>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Border at the end of each Page in print - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)