I want to know if anyone faced this issue when generating pdf from html.

For context,

this is the one structure part of main html for the pdf I am trying to generate.

{{table}}


    

        {{disclaimer}}
    


{{footer}}

* {
            font-family: "Microsoft JhengHei";
        }

        body {
            font-size: 10px;
            margin: 0px 0px;
            color: #333;
            line-height: 1.4;
            padding-bottom: 60mm;
        }
        {{table}}

        .disclaimer-section {
            margin-top: 12px;
            font-size: 8pt;
            color: #333;
            line-height: 1.5;
        }

        .disclaimer-section .disclaimer-title {
            font-weight: 500;
            margin-bottom: 6px;
            font-size: 8pt;
        }

        .disclaimer-section ul {
            list-style: none;
            margin: 0;
            padding-left: 0;
            font-size: 8pt;
        }

        .disclaimer-section li {
            margin: 0 0 4px 0;
            display: table;
            width: 100%;
            table-layout: fixed;
            font-size: 8pt;
        }

        .disclaimer-section li span:first-child {
            display: table-cell;
            width: 15px;
            text-align: right;
            vertical-align: top;
            padding-right: 3px;
            font-size: 8pt;
        }

        .disclaimer-section li span:last-child {
            display: table-cell;
            width: auto;
            vertical-align: top;
            font-size: 8pt;
        }

The Table section (content body) and footer are made out of different html and css

table html and css:

    

    

        
{{B1Header}}
        
{{A1Header}}
    
    
    

    

        
{{B1}}
        
{{A1}}
    

    

* {
     font-family: "Microsoft JhengHei";
     font-size: 10pt;
}
 body {
     margin: 0px 0px;
     color: #333;
     line-height: 1.4;
}
 table.projection-table {
     width: 100%;
     border-collapse: collapse;
     font-size: 8pt;
}
 table.projection-table th {
     padding: 6px 4px;
     font-weight: 700;
     font-size: 8pt;
     text-align: right;
}
 table.projection-table td {
     padding: 5px 4px;
     text-align: right;
     font-size: 8pt;
}

footer:

    
{{footerRemark}}
    

    

        

        

            

            

                

                    

                    

                        
abcd
                        

                            egfddd
                        
                    
                    
                
            
        
        
    

.footer-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Microsoft JhengHei";
}
.footer-row {
  font-size: 8pt;
  border-collapse: collapse;
}
.footer-right {
  vertical-align: top;
  width: 50%;
  font-size: 8pt;
}
.footer-right-table {
  width: 100%;
  border-collapse: collapse;
}
.text-right {
  text-align: right;
  font-size: 8pt;
}
.page-counter {
  text-align: left;
  font-size: 8pt;
}
.page-counter::before {
  content: counter(page) " / " counter(pages);
}
.footer-remark {
  vertical-align: bottom;
  text-align: left;
  font-size: 8pt;
  margin-bottom: 4px;
}
.divider {
  border: 0.5mm;
  border-top: 0.5mm solid #49648c;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 8pt;
  background-color: transparent;
}
@media print {
  .footer {
    position: fixed;
    bottom: 0;
  }
  body {
    margin-bottom: 40px;
  }
}

When pdf generated, this occur:

The overlay image

Things that have been done to resolve this issue:

• add margin-bottom/padding-bottom for the body of table: does not work as it just add spacing after the overlay

• add page-break-inside: avoid into table css

• remove fixed position for footer: cause the footer to only generate on the last page (not intended results as I want footer to appear each page)