wicked_pdfを使用すると、テーブルにページをまとめて保存できますか？

Question

私はwicked_pdfとwkhtmltopdfを使用して、私のレールアプリケーションでpdfを生成しています。私は

<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-header-group }