XSL FO使用border-collapse=separate时表格表头行样式丢失问题

我在当前项目中默认将表格的border-collapse属性设置为collapse，以此实现缩小行间距的紧凑表格效果。

相关代码 #

HTML表格代码 #

<table class="otherClasses compact" cols="3">
         <thead class="left">
          <tr><td>
            <p>Header 1</p>
           </td>
           <td>
            <p>Header 2</p>
           </td>
          </tr>
         </thead>
         <tbody class="left">
          <tr>
           <td>
            <p>Cell 1</p>
           </td>
           <td>
            <p>Cell 2</p>
           </td>
          </tr>
          <tr>
           <td>
            <p>Cell 3</p>
           </td>
           <td>
            <p>Cell 4</p>
           </td>
          </tr>
         </tbody>
        </table>

样式表核心代码 #

<fo:table-and-caption margin-left="0pt" border-collapse='collapse'>

    <xsl:if test="contains(@class, 'compact')">
        <xsl:attribute name="border-collapse">separate</xsl:attribute>
        <xsl:attribute name="border-spacing">0pt -4pt</xsl:attribute>
    </xsl:if>
    <fo:table>
        <fo:table-header>
            <xsl:apply-templates select="tr[th]"/>
        </fo:table-header>
        <fo:table-body>
            <xsl:apply-templates select="tr[td]"/>
        </fo:table-body>
    </fo:table>
</fo:table-and-caption>    

问题说明 #

原本设计逻辑为给表格添加compact类时，将border-collapse改为separate配合负的border-spacing实现更紧凑的效果，但实际添加compact类后表头样式出现损坏。此前我认为border-collapse=separate是适用场景更广的设置，一直未找到该异常的触发原因。

最终解决方案 #

最终我选择保留默认的border-collapse: collapse设置，通过调整单元格内边距的方式实现了预期的紧凑表格效果。

内容的提问来源于stack exchange，提问作者Nick