XSL FO losing styling on header rows of a table using border-collapse=separate

Question

For the project I am working on the default for the tables we are using is to have the border-collapse property set for collapse, essentially, the outcome I am looking for will make the table rows closer together

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

With my Stylesheet boiling down to something like this

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

So the image above shows the result of rendering when I use the class compact vs when I don't. I'll be honest, I don't really know that I understand why this is breaking the styling on the header row, when looking into border-collapse separate vs collapse I really thought separate would be the better setting for the general case but it seems to be breaking things for me in this instance

Solution to my specific issue I ended up going a different route and leaving the border collapse property as is. I ended up adjusting padding to achieve my wanted effect.

See below for a sample. Your XSL fragment lacks many things that would not be possible to render. The images you show could not have been created from that XSL. Start with something that works with all required elements and test from there. — Kevin Brown, Sep 13 '21 at 21:43
The code being used in the system is a lot more complicated and I tried to simplify it as much as possible, cut too much out it seems — Nick, Sep 14 '21 at 00:16

score 1 · Answer 1 · answered Sep 13 '21 at 21:40

Start with a minimal sample that would render through some XSL FO engine and work from there. This simple example could be like this:

<xsl:template match="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>
        <xsl:apply-templates/>
    </fo:table-and-caption>   
</xsl:template>
<xsl:template match="thead">
    <fo:table-header>
        <xsl:apply-templates/>
    </fo:table-header>
</xsl:template>
<xsl:template match="tbody">
    <fo:table-body>
        <xsl:apply-templates/>
    </fo:table-body>
</xsl:template>
<xsl:template match="tr">
    <fo:table-row>
        <xsl:apply-templates/>
    </fo:table-row>
</xsl:template>
<xsl:template match="td | th">
    <fo:table-cell>
        <xsl:apply-templates/>
    </fo:table-cell>
</xsl:template>
<xsl:template match="p">
    <fo:block><xsl:apply-templates/></fo:block>
</xsl:template>

Considering only the "table" part (you of course need to adding page-sequence, root, to this. This simple example gives you a minimal fo:table structure that can be rendered with all the required elements:

<fo:table-and-caption xmlns:fo="foo" margin-left="0pt" border-collapse="separate" border-spacing="0pt -4pt">
<fo:table-header>
    <fo:table-row>
        <fo:table-cell>
            <fo:block>Header 1</fo:block>
        </fo:table-cell>
        <fo:table-cell>
            <fo:block>Header 2</fo:block>
        </fo:table-cell>
    </fo:table-row>
</fo:table-header>
<fo:table-body>
    <fo:table-row>
        <fo:table-cell>
            <fo:block>Cell 1</fo:block>
        </fo:table-cell>
        <fo:table-cell>
            <fo:block>Cell 2</fo:block>
        </fo:table-cell>
    </fo:table-row>
    <fo:table-row>
        <fo:table-cell>
            <fo:block>Cell 3</fo:block>
        </fo:table-cell>
        <fo:table-cell>
            <fo:block>Cell 4</fo:block>
        </fo:table-cell>
    </fo:table-row>
</fo:table-body>
</fo:table-and-caption>

XSL FO losing styling on header rows of a table using border-collapse=separate

1 Answers1