tfoot repeating in every page

rafaeldev commented 1 year ago

Issue description

I have a table to list some info where at its final, show a sum of infos. I'm using bootstrap stylish it.

When that table is big, it repeat ffoot info in each page:

Table structure:

<table class="table table-bordered" id="services">
  <tbody>
  <tr>
    <td rowspan="2" class="text-vertical-align" style="max-width: 50%">
      <small class="d-block text-muted">Item</small>
      Item 1 name
    </td>

    <td>
      <small class="d-block text-muted">Qtde.</small>
      50,0
    </td>
    <td>
      <small class="d-block text-muted">Kind</small>
      Kind name
    </td>
  </tr>
  <tr>
    <td class="nowrap">
      <small class="d-block text-muted">Unit.</small>
      R$ 200,00
    </td>
    <td class="nowrap">
      <small class="d-block text-muted">Subtotal</small>
      R$ 10.000,00
    </td>
  </tr>

  <!-- these sibling tr repeating many times -->

  </tbody>

  <tfoot class="table-borderless table-sm">
  <tr>
    <td colspan="3" class="text-right">
    </td>
  </tr>
  <tr>
    <td colspan="3" class="text-right">
      <span>Subtotal: R$ 13.366,44</span>
    </td>
  </tr>
  <tr>
    <td colspan="3" class="text-right">
      <span>Desconto: R$ 2.004,97</span>
    </td>
  </tr>

  <tr>
    <th colspan="3" class="text-right">
      <span>
        Total: R$ 11.361,47
      </span>
    </th>
  </tr>
  </tfoot>
</table>

Expected or desired behavior

Don't repeat tfoot info

System specifications

wicked_pdf (2.7.0)
    wicked_pdf

wkhtmltopdf version (output of wkhtmltopdf --version): wkhtmltopdf 0.12.6.1 (with patched qt)

rafaeldev commented 1 year ago

I found this issue with the same problem and a good example to test:

test.html.txt (remove txt extension)

test.pdf

rafaeldev commented 1 year ago

I found this answer

Basically, I added this classes to my CSS file:

table { word-break: break-word; }
tr { page-break-inside: avoid !important; }
thead, tfoot {
  display: table-row-group;
}

zion commented 9 months ago

@rafaeldev Thank you for this solution! Works perfectly! 🍻

snjhyrglr commented 7 months ago

How you apply bootstrap to your pdf?

rafaeldev commented 7 months ago

@snjhyrglr what kind of problem do you have? You can't import at all?

So, I try show my context:

I created a file pdf.scss with some imports, including bootstrap:

@import "bootstrap/scss/bootstrap";
@import "old_grid";
@import "mixins/core";
@import "mixins/fonts";
@import "mixins/colors";

body,
html {
  font-family: 'Inter', sans-serif;
}

div {
  &.alwaysbreak { page-break-before: always !important; }
  &.nobreak:before { clear: both !important; }
  &.nobreak { page-break-inside: avoid !important; }
}

table { word-break: break-word; }
tr { page-break-inside: avoid !important; }
thead, tfoot {
  display: table-row-group;
}

.outline {
  p {
    font-size: 16px;
  }
}

div.row.outline,
div.container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

div.bg-white.shadow {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
}

.border-dark {
  border-color: #000 !important;
}

.border-bottom {
  border-bottom: 1px solid;
}

I'm using esbuild and yarn to import my frontend libraries and it's possible to import bootstrap like that.

important disclaimer: the old_grid it's for to override to use old grid system. It's because the wkhtmltopdf can't handle new flexbox system. I created a gist to you use if necessary. https://gist.github.com/rafaeldev/21017254b5df0b43a91af4c81c7a3012

Now, on pages, I import pdf.css this way:

<!DOCTYPE html>
<html lang="pt-BR" dir="ltr">
  <head>
    <meta charset="utf-8">

    <title>Title</title>

    <%= wicked_pdf_stylesheet_link_tag "pdf" %>
  </head>
  <body>
    <h1>Title</h1>
  </body>
</html>

Let me know if it's works

mileszs / wicked_pdf