1

对于我正在使用的表的默认项目，将border-collapse 属性设置为折叠，本质上，我正在寻找的结果将使表行更靠近

<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 类时与不使用时的渲染结果。老实说，我真的不知道为什么这会破坏标题行的样式，当查看边框折叠分离与折叠时，我真的认为分离对于一般情况来说是更好的设置，但它在这种情况下，似乎对我造成了破坏

针对我的具体问题的解决方案我最终选择了一条不同的路线并保留了边框折叠属性。我最终调整了填充以达到我想要的效果。

4

1 回答 1

1

从一个最小的示例开始，该示例将通过一些 XSL FO 引擎进行渲染并从那里开始工作。这个简单的例子可能是这样的：

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

仅考虑“表格”部分（您当然需要向其中添加页面序列根。这个简单的示例为您提供了一个最小的 fo:table 结构，可以使用所有必需的元素呈现：

<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>
于 2021-09-13T21:40:08.390 回答