pagebreak를 적용 할 수 없습니다

Question

인쇄하는 동안 페이지 당 하나씩 표시하고 싶은 달 목록이 있으므로 페이지 나누기를 생각했지만 문제는 페이지 나누기를 적용 할 수 없다는 것입니다. 나는 또한 퍼팅 시도했다 <div class="pagebreak"></div>하지만 왜 효과가 나타나지 않는지 이해가 안 돼요.

.pagebreak{ 
 
    page-break-after: always; 
 
    }

<table class="fc-year-main-table fc-border-separate"> 
 
    <tr> 
 
     <td class="fc-year-month-border fc-first"></td> 
 
     <td class="fc-year-monthly-td" style=""> 
 
      <div class="fc-year-monthly-name fc-first"><a name="201401" data-year="2014" data-month="0" href="#">January</a></div> 
 
      <div class="fc-row fc-widget-header"> 
 
       <table class="fc-year-month-header"> 
 
        <thead> 
 
         <tr class="fc-year-week-days"></tr> 
 
         <tr></tr> 
 
        </thead> 
 
       </table> 
 
      </div> 
 
      <div class="fc-day-grid-container"> 
 
       <div class="fc-day-grid"></div> 
 
      </div> 
 
      <div class="fc-year-monthly-footer"></div> 
 
     </td> 
 
     <td class="fc-year-month-border fc-last"></td> 
 

 
    <tr class="pagebreak"> 
 
     <td class="fc-year-month-border fc-first"></td> 
 
     <td class="fc-year-monthly-td" style=""> 
 
      <div class="fc-year-monthly-name"><a name="201402" data-year="2014" data-month="1" href="#">February</a></div> 
 
      <div class="fc-row fc-widget-header"> 
 
       <table class="fc-year-month-header"> 
 
        <thead> 
 
         <tr class="fc-year-week-days"></tr> 
 
         <tr></tr> 
 
        </thead> 
 
       </table> 
 
      </div> 
 
      <div class="fc-day-grid-container"> 
 
       <div class="fc-day-grid"></div> 
 
      </div> 
 
      <div class="fc-year-monthly-footer"></div> 
 
     </td> 
 
     <td class="fc-year-month-border fc-last"></td> 
 
    </tr> 
 

 
    <tr class="pagebreak"> 
 
     <td class="fc-year-month-border fc-first"></td> 
 
     <td class="fc-year-monthly-td" style=""> 
 
      <div class="fc-year-monthly-name"><a name="201403" data-year="2014" data-month="2" href="#">March</a></div> 
 
      <div class="fc-row fc-widget-header"> 
 
       <table class="fc-year-month-header"> 
 
        <thead> 
 
         <tr class="fc-year-week-days"></tr> 
 
         <tr></tr> 
 
        </thead> 
 
       </table> 
 
      </div> 
 
      <div class="fc-day-grid-container"> 
 
       <div class="fc-day-grid"></div> 
 
      </div> 
 
      <div class="fc-year-monthly-footer"></div> 
 
     </td> 
 
     <td class="fc-year-month-border fc-last"></td> 
 
    </tr> 
 

 
    <tr class="pagebreak"> 
 
     <td class="fc-year-month-border fc-first"></td> 
 
     <td class="fc-year-monthly-td" style=""> 
 
      <div class="fc-year-monthly-name"><a name="201404" data-year="2014" data-month="3" href="#">April</a></div> 
 
      <div class="fc-row fc-widget-header"> 
 
       <table class="fc-year-month-header"> 
 
        <thead> 
 
         <tr class="fc-year-week-days"></tr> 
 
         <tr></tr> 
 
        </thead> 
 
       </table> 
 
      </div> 
 
      <div class="fc-day-grid-container"> 
 
       <div class="fc-day-grid"></div> 
 
      </div> 
 
      <div class="fc-year-monthly-footer"></div> 
 
     </td> 
 
     <td class="fc-year-month-border fc-last"></td> 
 
    </tr> 
 

 
</table>

Answer 1

첫 번째 <tr>가 (그들을 고정) 떨어져 이러한 문제에서 누락 더 pagebreak 클래스와 그 </tr> 없었다 작동

@media print { 
    tr.pagebreak { display: block; page-break-before: always; } 
} 

는 것 같다 사용 : 여기 내 코드입니다 pagebreak의 tr이 조금 까다 롭습니다.이 질문을 확인하십시오. Applying "page-break-before" to a table row (tr)

근무 데모 :

window.print();

 @media print { 
 
      tr.pagebreak { display: block; page-break-before: always; } 
 
     }

<table class="fc-year-main-table fc-border-separate"> 
 
    <tr class="pagebreak"> 
 
     <td class="fc-year-month-border fc-first"></td> 
 
     <td class="fc-year-monthly-td" style=""> 
 
      <div class="fc-year-monthly-name fc-first"><a name="201401" data-year="2014" data-month="0" href="#">January</a></div> 
 
      <div class="fc-row fc-widget-header"> 
 
       <table class="fc-year-month-header"> 
 
        <thead> 
 
         <tr class="fc-year-week-days"></tr> 
 
         <tr></tr> 
 
        </thead> 
 
       </table> 
 
      </div> 
 
      <div class="fc-day-grid-container"> 
 
       <div class="fc-day-grid"></div> 
 
      </div> 
 
      <div class="fc-year-monthly-footer"></div> 
 
     </td> 
 
     <td class="fc-year-month-border fc-last"></td> 
 
\t </tr> 
 
    <tr class="pagebreak"> 
 
     <td class="fc-year-month-border fc-first"></td> 
 
     <td class="fc-year-monthly-td" style=""> 
 
      <div class="fc-year-monthly-name"><a name="201402" data-year="2014" data-month="1" href="#">February</a></div> 
 
      <div class="fc-row fc-widget-header"> 
 
       <table class="fc-year-month-header"> 
 
        <thead> 
 
         <tr class="fc-year-week-days"></tr> 
 
         <tr></tr> 
 
        </thead> 
 
       </table> 
 
      </div> 
 
      <div class="fc-day-grid-container"> 
 
       <div class="fc-day-grid"></div> 
 
      </div> 
 
      <div class="fc-year-monthly-footer"></div> 
 
     </td> 
 
     <td class="fc-year-month-border fc-last"></td> 
 
    </tr> 
 

 
    <tr class="pagebreak"> 
 
     <td class="fc-year-month-border fc-first"></td> 
 
     <td class="fc-year-monthly-td" style=""> 
 
      <div class="fc-year-monthly-name"><a name="201403" data-year="2014" data-month="2" href="#">March</a></div> 
 
      <div class="fc-row fc-widget-header"> 
 
       <table class="fc-year-month-header"> 
 
        <thead> 
 
         <tr class="fc-year-week-days"></tr> 
 
         <tr></tr> 
 
        </thead> 
 
       </table> 
 
      </div> 
 
      <div class="fc-day-grid-container"> 
 
       <div class="fc-day-grid"></div> 
 
      </div> 
 
      <div class="fc-year-monthly-footer"></div> 
 
     </td> 
 
     <td class="fc-year-month-border fc-last"></td> 
 
    </tr> 
 

 
    <tr class="pagebreak"> 
 
     <td class="fc-year-month-border fc-first"></td> 
 
     <td class="fc-year-monthly-td" style=""> 
 
      <div class="fc-year-monthly-name"><a name="201404" data-year="2014" data-month="3" href="#">April</a></div> 
 
      <div class="fc-row fc-widget-header"> 
 
       <table class="fc-year-month-header"> 
 
        <thead> 
 
         <tr class="fc-year-week-days"></tr> 
 
         <tr></tr> 
 
        </thead> 
 
       </table> 
 
      </div> 
 
      <div class="fc-day-grid-container"> 
 
       <div class="fc-day-grid"></div> 
 
      </div> 
 
      <div class="fc-year-monthly-footer"></div> 
 
     </td> 
 
     <td class="fc-year-month-border fc-last"></td> 
 
    </tr> 
 

 
</table>