19

Now I am using xhtmlrenderer to covert html to PDF. My maven dependancy as follows:

    <dependency>
        <groupId>org.mvel</groupId>
        <artifactId>mvel2</artifactId>
        <version>2.1.0.drools2</version>
        <scope>compile</scope>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>org.xhtmlrenderer</groupId>
        <artifactId>core-renderer</artifactId>
        <version>R8</version>
        <scope>compile</scope>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>com.lowagie</groupId>
        <artifactId>itext</artifactId>
        <version>2.0.8</version>
        <scope>compile</scope>
        <optional>true</optional>
    </dependency>

I am trying to repeat the table head in every PDF's page.So I use the css:

table {
        -fs-table-paginate: paginate;
    }`

The explain for the CSS is here.

-fs-table-paginate

  • when used with the value -fs-table-paginate: paginate, modifies the table layout algorithm to repeat table headers and footers on subsequent pages and improve the appearance of cells that break across pages (for example by closing and reopening borders), but that's all it does. If a table's minimum width is wider than the page, it will be chopped off.

  • When add the above css my table's borders are detached.

enter image description here

  • Before I add the css , the table's borders are collapsed into single border.

enter image description here

So I think the table { -fs-table-paginate: paginate; } made my table border-collapse:collapse invalid.

So what can I do to fix the bug, make the table's borders collapse?

My app CSS for the table as follows

table{
    border:1px solid #000000;
    border-collapse:collapse;
    -fs-table-paginate: paginate;
}
table td{
    border:1px solid #000000;
    word-wrap:break-word;
    white-space:normal;
    overflow:hidden;
    text-align:left;
    line-height:16px;
    height:16px;

}
table tr{
    page-break-inside:avoid;
}
table thead tr th{
    background:#f2f2f2;
    border:1px solid #000000;
    text-align:center;
}

table tr th{
    background:#f2f2f2;
    border:1px solid #000000;
    text-align:center;
}

And when add -fs-table-paginate: paginate; sometimes the table header will be not normal. The header will not be display correctly. And below table header will increase a extra blank line. As follows: enter image description here

Anyone has any idea?

Adriano
  • 3,788
  • 5
  • 32
  • 53
FishGel
  • 1,100
  • 2
  • 16
  • 27

4 Answers4

17

For the same problem, I used this workaround:

table {
  -fs-table-paginate: paginate;
  border-spacing: 0;
}

It worked for me, my thead is repeated on each page.

obourgain
  • 8,856
  • 6
  • 42
  • 57
2

Yes... you are correct...

border-collapse: collapse and -fs-table-paginate: paginate cannot be used together. border-collapse is reset to separate when -fs-table-paginate is set to paginate...

So the better way to implement your table header is by using thead... this may help u...

lakshmi priya
  • 159
  • 11
1

Workaround that worked for me :

Init all th and td one by one with border set to 0px : border: 0px;

And then apply border where you need them like this :

<td style="border: 0px; border-left: 1px solid #ddd;">some texte</td>

Of course I let -fs-table-paginate: paginate; in table style.

Working sample html : https://gist.github.com/laguiz/5509461

Here is the result :

enter image description here

Maxence
  • 13,148
  • 4
  • 29
  • 28
1

you can set border left width and border top width 0, just use this css

    table {
        -fs-table-paginate:paginate;
    }

    table * {
        border-collapse: collapse;
        border-color: #000;
    }

    table thead tr:first-child th {
        border-top-width: 1px;
        border-top-style: solid;
    }

    table tr th:first-child,
    table tr td:first-child {
        border-left-width: 1px;
        border-left-style: solid;
    }

    table tr th,
    table tr td {
        border-top-width: 0px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 0px;
        border-bottom-style: solid;
        border-right-style: solid;
    }
Vince
  • 21
  • 4