CSS Printing: Avoiding cut-in-half table between pages?

user_9246297 0
Viewed 316

Here is the sample of my page to print, but it break the page in the bad place and the print looks very bad, please check the code to understand what happens? I need to page bread before or after it if needed not in the middle, also some space from bottom.

enter image description here

body {
    opacity: 0;
}
@media print {
  * {
    -webkit-print-color-adjust: exact !important;
  }
  @font-face {
    font-family: "YekanWeb";
    src: url("../fonts/YekanWeb-Regular.woff2") format("woff2"),
      url("../fonts/YekanWeb-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  @page {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 1cm;
    padding-bottom: 1cm;
  }
  h2.right-border {
    background-color: #f3f5f7;
    border-color: #42b983;
    padding: 7px 10px;
    border-right-width: 0.6rem;
    border-right-style: solid;
    margin: 1rem -15px;
  }
  body {
    padding-top: 15px;
    padding-bottom: 15px;
    direction: rtl !important;
    text-align: right !important;
    font-family: "YekanWeb", arial, sans-serif !important;
  }
  .table-prices {
    break-inside: avoid;
  }

  body {
    opacity: 1 !important;
    display: grid !important;
  }
  table {
    page-break-inside: avoid;
  }

  table {
    font-family: "YekanWeb", arial, sans-serif;
    border-collapse: collapse;
    width: 70%;
  }

  td,
  th {
    border: 1px solid #dddddd;
    text-align: right;
    padding: 2px 8px;
    font-weight: 700;
  }

  .table-invoice tr:nth-child(even) {
    background: rgb(241 241 241 / 50%) !important;
  }
  .reports {
    padding: 20px 10px;
    font-family: "YekanWeb", "Calibri", "Adobe Arabic";
    background: rgb(255, 255, 255);
  }
  .rep_header {
    color: #555;
    width: 100%;
    height: 100px;
    padding-bottom: 10px;
  }
  .container.rep_header {
    border-bottom: 2px solid #333;
  }
  .header {
    position: fixed;
    top: 0;
  }
  .footer {
    position: relative;
    bottom: 0;
    margin-top: 20px;
    width: 100%;
    text-align: center;
  }
  .rep_header_logo {
    margin: 0px 0px 0px 0px;
    display: block;
    float: right;
    height: 90px;
    text-align: right;
  }
  .rep_header_logo img {
    height: 100%;
    position: relative;
  }
  .rep_header_title {
    margin: 0px 40px 0px 0px;
    float: right;
    display: block;
    height: 100px;
    text-align: right;
  }
  .rep_header_title h2 {
    font-size: 32px;
    text-align: right;
    line-height: 90px;
    vertical-align: middle;
  }
  .rep_header_extra {
    margin: 20px 0px 0px 0px;
    float: left;
    display: block;
    height: 90px;
    width: 150px;
    text-align: right;
    font-size: 13px;
  }
  .inv_header_extra {
    margin: 20px 0px 0px 0px;
    float: left;
    display: block;
    height: 90px;
    width: 140px;
    text-align: right;
    font-size: 12px;
  }
  .rep_body {
    display: block;
    width: 100%;
  }
  .rep_body_content {
    display: block;
    width: 100%;
  }
  .rep_overview {
    padding: 0px;
  }
  .rep_description {
    margin: 14px 0px 12px;
  }
  .paneldiv {
    padding: 0px 1%;
  }
  .table-reports {
    margin: 10px 0px 20px;
  }
  .table-reports tr th,
  .table-reports tr td {
    padding: 2px 8px;
    vertical-align: top;
  }
  .table-reports thead tr th {
    background: rgb(241 241 241 / 50%);
    font-weight: 700;
    font-size: 12px;
    line-height: 28px;
    direction: rtl !important;
    text-align: right !important;
  }
  .table-reports tfoot tr th {
    background: #eee;
    font-weight: 700;
    font-size: 12px;
    line-height: 28px;
    direction: rtl !important;
    text-align: right !important;
  }
  .table-reports tr {
    font-size: 12px;
  }
  .table-reports tr:nth-child(even) {
    background: #efefef;
  }
  .rep_wait {
    width: 100%;
    text-align: center;
    margin-top: 130px;
    margin-bottom: 130px;
    font-size: 40px;
    color: #ccc;
  }
  .rep_no_result {
    display: block;
    width: 100%;
    text-align: center;
    margin: 150px 0px;
    font-size: 21px;
    color: #999;
  }
  .invoice_heading {
    display: block;
    width: 98%;
    margin: 30px 1%;
    font-size: 16px;
  }
  .in_info {
    width: 20%;
    text-align: left;
    display: block;
    float: left;
    left: 0px;
  }
  .or_datetime {
    margin: 15px 0px 15px 0px;
    font-size: 12px;
    color: #777;
    font-weight: normal !important;
  }
  .cu_in_table {
    width: 100%;
  }
  .cu_in_table tr td {
    border: 1px solid #999;
    font-size: 14px;
    padding: 2px 6px;
    font-weight: 700;
  }
  .invtablediv {
    display: block;
    padding: 0px !important;
  }
  .table-invoice {
    width: 100%;
  }
  .table-invoice tr th {
    padding: 1px 8px;
    vertical-align: top;
    text-align: center;
    border: 1px solid #c2bfbf;
    font-size: 12px;
    font-weight: 700;
  }
  .table-invoice tr td {
    font-size: 14px;
    padding: 3px 8px 2px;
    vertical-align: top;
    text-align: right;
    font-weight: 700;
    border: 1px solid #cfcfcf;
  }
  .table-invoice thead tr th {
    background: #ddd;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    direction: rtl !important;
    text-align: right !important;
  }
  .table-itemreceipt thead tr th {
    line-height: 16px !important;
  }
  .table-invoice tfoot tr th {
    padding: 0px 8px;
    background: #e9e9e9;
    font-weight: 700;
    font-size: 11px;
    line-height: 20px;
    direction: rtl !important;
    text-align: right;
  }
  .table-invoice tfoot tr th {
    padding: 0px 8px;
  }
  .table-invoice tr {
    font-size: 10px;
  }

  .inv_stamp {
    display: block;
    padding: 0px 0px;
    float: right;
    width: 100%;
    margin: 15px 0px;
    font-size: 12px;
    font-weight: 700;
  }
  .inv_desc {
    display: block;
    padding: 0px 4px;
    margin: 0px 0%;
    font-weight: 700;
  }

  .table-prices {
    float: left;
    max-width: 50%;
    width: min-content;
  }
  .table-prices th {
    white-space: nowrap;
  }
  .table-prices tr {
    background: rgb(241 241 241 / 50%);
  }
  .inv_verify {
    display: block;
    padding: 0px 4px;
    width: 56%;
    width: 100%;
    height: 120px;
    margin: 10px 0%;
  }
  .inv_notesdiv {
    display: block;
    padding: 0px 4px;
    float: right;
    width: 98%;
    margin: 20px 0%;
    font-size: 10px;
  }
  .inv_note {
    display: block;
    width: 100%;
    margin: 8px 0%;
  }
  .rep_footer {
    display: block;
    float: right;
    width: 80%;
    text-align: center;
    color: #ccc;
    margin-top: 30px;
  }
  .inv_footer {
    background: #fff;
    position: fixed;
    bottom: 10px;
    padding: 8px 1%;
    display: block;
    float: right;
    width: 98%;
    font-size: 14px;
    color: #555;
    line-height: 16px;
  }
  .invz_footer {
    border-top: 2px solid #333 !important;
    background: #fff;
    position: fixed !important;
    bottom: 4px !important;
    margin-top: 60px;
    padding: 8px 1%;
    display: block;
    float: right;
    width: 98%;
    font-size: 14px;
    color: #777;
    line-height: 16px;
  }
  .invz_footer .company_desc,
  .invz_footer .company_contact,
  .invz_footer .company_address {
    display: block;
    float: right;
    text-align: right;
    font-size: 12px;
  }
  .invz_footer .company_desc {
    width: 40%;
  }
  .invz_footer .company_contact {
    width: 30%;
  }
  .invz_footer .company_address {
    width: 30%;
  }

  .transaction-block {
    display: block;
    width: 98%;
    margin: 0px 1%;
    font-size: 14px;
  }
  .tr_date table tr td {
    padding-left: 4px;
  }
  .tr_titles {
    margin-top: 10px;
  }
  .tr_titles table tr td {
    padding-left: 4px;
  }
  .tr_desc_table {
    width: 100%;
    margin-top: 20px;
  }
  .tr_desc_table thead tr td {
    text-align: center;
    line-height: 26px;
    font-weight: 700;
    background: #ddd;
    border: 1px solid #c2bfbf;
  }
  .tr_desc_table tbody tr td {
    padding: 4px 0;
    text-align: center;
    border: 1px solid #cfcfcf;
  }
  .narrations {
    margin-top: 20px;
  }
  .blank_line_label {
    display: inline-block;
    width: 80px;
  }
  .blank_line {
    display: inline-block;
    width: 450px;
    border-bottom: 2px solid #aaa;
    margin: 0 10px;
  }
  .verification_area {
    width: 100%;
    display: block;
    margin-top: 20px;
  }
  .verification_area .tr_titles {
    width: 100%;
    display: block;
    text-align: center;
  }
  .verification_area .signatures {
    display: inline-block;
    width: 15%;
    margin: 80px 4% 20px;
    padding-top: 6px;
    border-top: 1px solid #999;
  }
  .tr_cost_table {
    width: 100%;
    font-size: 14px;
    margin-top: 20px;
  }
  .tr_cost_table thead tr td {
    text-align: center;
    line-height: 26px;
    font-weight: 700;
    background: #ddd i !important;
  }
  .tr_cost_table tbody tr td {
    padding: 4px 0;
    text-align: center;
  }
  .tr_cost_table tfoot tr td {
    line-height: 26px;
    background: #e4e4e4 !important;
  }
  .bs_tr_s td {
    line-height: 0.3rem !important;
  }
  .table-prices tr th:first-child {
    text-align: left !important;
    width: 192px;
  }
}
<!DOCTYPE html>
<html>

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  <link rel="stylesheet" media="print" href="http://localhost:8000/css/print.css">
  <link rel="stylesheet" href="http://localhost:8000/css/print.css" />
</head>

<body onload="window.print()">
  <div class="container rep_header">
    <header class="rep_header">
      <div class="rep_header_logo"><img src="/img/default/logo.png"></div>
      <div class="rep_header_title">
        <h2>شرکت تجارتی شایق علیمی لمیتد</h2>
      </div>
      <div class="inv_header_extra"><span>بل آقر</span><br>شمارۀ بل: <span class="invoice_number"
          dir="ltr"></span><br>تاریخ صادره: <span class="curdate"></span></div>
    </header>
  </div>

  <div class="container mt-5">
    <h2 class="right-border">معلومات آقر</h2>
    <div class="row justify-content-between">
      <table class="cu_in_table pull-left">
        <thead>
          <tr>
            <td style="width:20%;">سریال نمبر: </td>
            <td style="width:80%;">
              WB-101
            </td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>عنوان:</td>
            <td><span class="cu_name">Ducimus do illo id</span>
            </td>
          </tr>
          <tr>
            <td>تاریخ نشر اعلان: </td>
            <td><span class="" dir="ltr" style="text-align:left;">1400-01-14</span></td>
          </tr>
          <tr>
            <td>آدرس نشر اعلان: </td>
            <td><span class="" dir="ltr" style="text-align:left;">Aliqua Debitis volu</span></td>
          </tr>
          <tr>
            <td>تاریخ آفرگشایی:</td>
            <td><span class="" dir="ltr" style="text-align:left;">1400-01-14</span></td>
          </tr>
          <tr>
            <td>آدرس آفرگشایی: </td>
            <td><span class="" dir="ltr" style="text-align:left;">Blanditiis et odit e</span></td>
          </tr>
          <tr>
            <td>تاریخ ختم پیشنهاد:</td>
            <td><span class="" dir="ltr" style="text-align:left;">1400-01-14</span></td>
          </tr>
          <tr>
            <td>شماره شناسایی آقر:</td>
            <td><span class="" dir="ltr" style="text-align:left;">Laudantium adipisic</span></td>
          </tr>
          <tr>
            <td>مرجع مربوطه:</td>
            <td><span class="" dir="ltr" style="text-align:left;">ریاست محافظت رئیس جمهور</span></td>
          </tr>
          <tr>
            <td>تضمین آفر:</td>
            <td><span class="" dir="ltr" style="text-align:left;">23233</span></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="container">
    <h2 class="right-border">لیست محصولات</h2>
    <div class="row justify-content-between">
      <div class="invtablediv">
        <table class="table-invoice">
          <thead>
            <tr>
              <th style="width:4%; text-align: center !important;">#</th>
              <th style="width:14%; text-align: center !important;">نام محصول</th>
              <th style="width:15%; text-align: center !important;">مقدار</th>
              <th style="width:10%; text-align: center !important;">فی واحد</th>
              <th style="width:15%; text-align: center !important;">مجموع</th>
            </tr>
          </thead>
          <tbody>
                          <tr>
                <td>1</td>
                <td>Armando Welch</td>
                <td>6348</td>
                <td>3</td>
                <td>19044</td>
              </tr>
                          <tr>
                <td>2</td>
                <td>2021 سوپر</td>
                <td>109980</td>
                <td>12</td>
                <td>1319760</td>
              </tr>
                          <tr>
                <td>3</td>
                <td>Cruz Lee</td>
                <td>10235</td>
                <td>30</td>
                <td>307050</td>
              </tr>
                          <tr>
                <td>4</td>
                <td>Armando Welch</td>
                <td>36</td>
                <td>2222</td>
                <td>79992</td>
              </tr>
                      </tbody>
        </table>
        <br>
        <table class="table-prices text-right float-left">
          <thead>
            <tr>
              <th>قیمت مجموعی اجناس :</th>
              <th style="width:142px;">1725846 AFN</th>
            </tr>
            <tr>
              <th style="text-align:left !important;">ارزش آقر :</th>
              <th>614624 AFN</th>
            </tr>
            <tr>
              <th style="text-align:left !important;">تامینات :</th>
              <th>0 %</th>
            </tr>
            <tr>
              <th style="text-align:left !important;">مالیات :</th>
              <th>0 %</th>
            </tr>
            <tr>
              <th style="text-align:left !important;">انتقالات :</th>
              <th>0 AFN</th>
            </tr>
            <tr>
              <th style="text-align:left !important;">خدمات :</th>
              <th>1444 AFN</th>
            </tr>
            <tr>
              <th style="text-align:left !important;">تخفیف :</th>
              <th>1111222 AFN</th>
            </tr>
            <tr>
              <th style="text-align:left !important;">قیمت نرخ دهی :</th>
              <th>1725846 AFN</th>
            </tr>
          </thead>
        </table>
        <div class="inv_stamp pull-left margin-top-30" style="width:50%;">
          <div class="inv_desc">
            ملاحضات:<br>
            <div class="inv_desc_detail">
              به تعداد (4) قلم جنس برای محترم/محترمه
              "ریاست محافظت رئیس جمهور" به ارزش "1725846 افغانی" به
              آفر تهیه شده است.
            </div>
          </div>
          <div class="inv_verify margin-top-30">
            مهر و امضاء:<br>
            <div class="inv_desc_detail">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="container">
      <span class="hidespan seller" style="float: left;padding-left: 2%;">چاپ شده توسط
        شرکت شایق علیمی</span>
    </div>
  </div>
</body>
<script>


</script>

</html>

css html javascript
1 Answers

You need to add margins to your page like this:

@page {
  margin: 72px 72px 138.24px 72px;
}

and also add these style to avoid breaking your table

    table {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }
    
    table tfoot thead {
        break-inside: auto;
        overflow: hidden;
    }
user_47786510
Related