html - CSS到PDF，飞碟中的css：-fs-table-paginate导致border-collapse：collapse无效

Question

现在我正在使用xhtmlrenderer将 html 转换为 PDF。我的maven依赖如下：

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

我试图在每个 PDF 的页面中重复表头。所以我使用 css：

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

CSS 的解释在这里。

-fs-table-paginate

• 当与 value 一起使用时-fs-table-paginate: paginate，修改表格布局算法以在后续页面上重复表格页眉和页脚，并改善跨页单元格的外观（例如通过关闭和重新打开边框），但仅此而已。如果表格的最小宽度比页面宽，它将被切掉。

• 添加上面的 css 时，我的表格边框被分离。

• 在我添加 css 之前，表格的边框被折叠成单边框。

所以我认为这table { -fs-table-paginate: paginate; }使我的表border-collapse:collapse无效。

那么我能做些什么来修复这个错误，让表格的边框崩溃呢？

我的表格应用 CSS 如下

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

并且-fs-table-paginate: paginate; 有时添加时表头会不正常。标题将无法正确显示。而下面的表头会增加一个额外的空行。如下：

有人有什么想法吗？

Answer 1

对于同样的问题，我使用了这个解决方法：

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

它对我有用，我thead在每一页上都重复了。

Answer 2

是的，你是对的...

border-collapse:collapse 和 -fs-table-paginate:paginate 不能一起使用。当 -fs-table-paginate 设置为 paginate 时，border-collapse 被重置为分离...

因此，实现表格标题的更好方法是使用 thead...这可能对您有所帮助...

Answer 3

对我有用的解决方法：

th将边框设置为 0px并td一一初始化：border: 0px;

然后像这样在需要它们的地方应用边框：

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

当然，我让-fs-table-paginate: paginate;表格样式。

工作示例 html：https ://gist.github.com/laguiz/5509461

这是结果：

Answer 4

您可以设置边框左宽度和边框顶部宽度 0，只需使用此 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;
    }