html - 使用 wicked_pdf 如何将我的表格放在一个页面上？

Question

我正在使用 wicked_pdf 和 wkhtmltopdf 在我的 Rails 应用程序中生成 pdf。我已经使用以下样式规则设置了我的页面(除了 Bootstrap 提供的样式之外)...

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

到

 thead { display: table-row-group }