wicked_pdf를 사용하면 페이지를 함께 유지할 수 있습니까?

Question

난 내 레일 응용 프로그램에서 PDF를 생성하는 wicked_pdf과 wkhtmltopdf을 사용하고 있습니다. 여기

<style> 
    thead { display: table-header-group } 
    tfoot { display: table-row-group } 
    tr { page-break-inside: avoid } 

    .page-break { 
     display:block; clear:both; page-break-after:always; 
    } 
</style> 

그리고 내가 문제의 테이블을 생성하기 위해 사용하고 코드의 "미리보기"입니다 ... 설치 (제공된 스타일을 부트 스트랩 외에) 다음과 같은 스타일 규칙 내 페이지했습니다.

<br /> 
<table class="table table-condensed table-bordered" style="margin-top: -15px; margin-bottom: 15px;"> 
    <thead> 
     <tr> 
      <th style="font-size: 9px; background-color: #ccc; width: 75px;" colspan="10">SKILL MATRIX</th> 
     </tr> 
     <tr> 
      <th class="text-center" style="font-size: 9px; background-color: #efefef; width: 75px;" colspan="2">STICD</th> 
      <th class="text-center" style="font-size: 9px; background-color: #efefef; width: 75px;" colspan="2">CRITICAL FACTORS</th> 
      <th class="text-center" style="font-size: 9px; background-color: #efefef; width: 75px;" colspan="2">POSITION SPECIFICS</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td style="width: 33%;" colspan="2"> 
       <% report.evaluations.joins(:skill).where(skills: { type: 'sticd' }, is_deleted: 0).order('skills.order_by').each_with_index do |evaluation, i| %> 
        <% if i > 0 %> 
         <div style="border-top: 1px solid #ddd; padding: 5px;"> 
        <% else %> 
         <div style="padding: 5px;"> 
        <% end %> 
         <div style="display: inline-block; font-size: 9px; width: 78%;"><%= "#{evaluation.skill.name}" %></div> 
         <div class="text-center" style="padding: 2px; border: 1px solid #000; display: inline-block; width: 20%; font-size: 9px; background-color: #<%= evaluation.try(:grade).try(:back_color) %>; color: #<%= evaluation.try(:grade).try(:fore_color) %>;"> 
          <%= "#{evaluation.try(:grade).try(:value) || '-'}" %> 
         </div> 
        </div> 
       <% end %> 
      </td> 
      <td style="width: 33%;" colspan="2"> 
       <% report.evaluations.joins(:skill).where(skills: { type: 'critical factors' }, is_deleted: 0).order('skills.order_by').each_with_index do |evaluation, i| %> 
         <% if i > 0 %> 
          <div style="border-top: 1px solid #ddd; padding: 5px;"> 
         <% else %> 
          <div style="padding: 5px;"> 
         <% end %> 
         <div style="display: inline-block; font-size: 9px; width: 78%;"><%= "#{evaluation.skill.name}" %></div> 
         <div class="text-center" style="padding: 2px; border: 1px solid #000; display: inline-block; width: 20%; font-size: 9px; background-color: #<%= evaluation.try(:grade).try(:back_color) %>; color: #<%= evaluation.try(:grade).try(:fore_color) %>;"> 
          <%= "#{evaluation.try(:grade).try(:value) || '-'}" %> 
         </div> 
        </div> 
       <% end %> 
      </td> 
      <td style="width: 33%;" colspan="2"> 
       <% report.evaluations.joins(:skill).where(skills: { type: 'position specifics'}, is_deleted: 0).order('skills.order_by').each_with_index do |evaluation, i| %> 
         <% if i > 0 %> 
          <div style="border-top: 1px solid #ddd; padding: 5px;"> 
         <% else %> 
          <div style="padding: 5px;"> 
         <% end %> 
         <div style="display: inline-block; font-size: 9px; width: 78%;"><%= "#{evaluation.skill.name}" %></div> 
         <div class="text-center" style="padding: 2px; border: 1px solid #000; display: inline-block; width: 20%; font-size: 9px; background-color: #<%= evaluation.try(:grade).try(:back_color) %>; color: #<%= evaluation.try(:grade).try(:fore_color) %>;"> 
          <%= "#{evaluation.try(:grade).try(:value) || '-'}" %> 
         </div> 
        </div> 
       <% end %> 
      </td> 
     </tr> 
    </tbody> 
</table> 

다음은 표시 방법의 예입니다. 빨간색으로 표시된 부분을 표시하고 싶지 않습니다. 더 이상 코드를 게시하거나 더 설명해야하는 경우 알려 주시기 바랍니다. 감사!

Answer 1

는 알아낼 것이다 이것에 많은 시간을 소비 한이 솔루션은 한 번 내가 SO에이를 게시 한 표시됩니다. 다음 코드 줄을 변경하고 원하는 결과를 얻었습니다.

thead { display: table-row-group } 

에

thead { display: table-header-group }