css - 在视觉力页面中重复标题

Question

尊敬的 CSS/Salesforce 专家，

我正在寻找一种解决方案，一旦应用分页符，就需要在所有页面上(作为标题)打印从许多表派生的标题。除了第一页之外，我无法打印标题。此外，我还需要确保数据表值不会拆分为不同的页面。请帮助我。

请看下面我的代码

请帮我抢先一步!!!

<table style="border-collapse: collapse;-fs-table-paginate: paginate;" width="100%">
  <thead>
    <tr>
      <th style="border-left: 1px solid #000000;font-size:9px;">{!mapQuotationVariables[iSerial_No].Arabic__c}
        <br/>{!mapQuotationVariables[iSerial_No].English__c}</th>
      <th style="font-size:9px;">{!mapQuotationVariables[iItem_Code_Desc].Arabic__c}
        <br/>{!mapQuotationVariables[iItem_Code_Desc].English__c}</th>
      <th style="font-size:9px;">{!mapQuotationVariables[iQuantity].Arabic__c}
        <br/>{!mapQuotationVariables[iQuantity].English__c}</th>
      <th style="font-size:9px;">{!mapQuotationVariables[iUnit].Arabic__c}
        <br/>{!mapQuotationVariables[iUnit].English__c}</th>
      <th style="font-size:9px;">{!mapQuotationVariables[iUnit_Price].Arabic__c}
        <br/>{!mapQuotationVariables[iUnit_Price].English__c}</th>


      <apex:outputPanel rendered="{!IsCustomerQuote}">
        <th>{!mapQuotationVariables[iDiscount].Arabic__c}
          <br/>{!mapQuotationVariables[iDiscount].English__c}</th>
      </apex:outputPanel>
      <th style="border-right: 1px solid #000000;">{!mapQuotationVariables[iItem_total].Arabic__c}
        <br/>{!mapQuotationVariables[iItem_total].English__c}</th>
    </tr>
  </thead>
  <tbody>
    <apex:variable var="sr" value="{!1}" />
    <apex:repeat value="{!lstQuoteLineItem}" var="qLine">
      <tr>
        <td style="border-style: solid;vertical-align: top;">{!sr}</td>
        <td style="border-style: solid;">

          <table width="100%" style="border-collapse: collapse;font-size: 8px;">
            <tr style="height:4px;">
              <td width="33%" style="text-align:left;padding:0px;">
                {!qLine.PricebookEntry.Product2.ProductCode}
              </td>
              <td width="33%" style="text-align:right;padding:0px;">
                {!qLine.PricebookEntry.Product2.Manufacturer__r.Name}
              </td>
              <td width="33%" style="text-align:right;padding:0px;">
                {!qLine.PricebookEntry.Product2.Manufacturer__r.Country__c}
              </td>

            </tr>

            <tr width="100%" style="height:3px;">
              <td colspan="3" style="text-align:left;padding:2px;">
                {!qLine.PricebookEntry.Product2.Name}
              </td>
            </tr>
            <tr width="100%" style="height:3px;">
              <td colspan="3" style="text-align:left;padding:2px;">
                {!qLine.PricebookEntry.Product2.Arabic_Product_Name__c}
              </td>
            </tr>
            <tr width="100%" style="height:3px;">
              <td colspan="3" style="text-align:left;padding:2px;">
                <apex:outputText value="{!qLine.PricebookEntry.Product2.Product_Description_Split__c}" escape="false" />
                <!--<output><apex:outputText value="{!qLine.PricebookEntry.Product2.Product_Description_Split__c}"/></output>-->
              </td>
            </tr>

          </table>

        </td>
        <td style="border-style: solid;vertical-align: top;">
          <apex:outputText value="{0, number,###,##0}">
            <apex:param value="{!qLine.Quantity}" />
          </apex:outputText>
        </td>
        <td style="border-style: solid;vertical-align: top;">{!qLine.PricebookEntry.Product2.Unit__c}</td>
        <td style="border-style: solid;vertical-align: top;">
          {!Quote.CurrencyISOCode} &nbsp;
          <apex:outputText value="{0, number,###,##0}" rendered="{!!IsCustomerQuote}">
            <apex:param value="{!qLine.Customer_List_Price__c}" />
          </apex:outputText>

          <apex:outputText value="{0, number,###,##0}" rendered="{!IsCustomerQuote}">
            <apex:param value="{!qLine.Customer_List_Price__c}" />
          </apex:outputText>

        </td>

        <apex:outputPanel rendered="{!IsCustomerQuote}">
          <td style="border-style: solid;vertical-align: top;">
            {!Quote.CurrencyISOCode} &nbsp;
            <apex:outputText value="{0, number,###,##0}" rendered="{!IsCustomerQuote}">
              <apex:param value="{!qLine.Customer_Discount_Amount__c}" />
            </apex:outputText>
          </td>
        </apex:outputPanel>

        <td style="border-style: solid;vertical-align: top;">
          {!Quote.CurrencyISOCode} &nbsp;
          <apex:outputText value="{0, number,###,##0}" rendered="{!!IsCustomerQuote}">
            <apex:param value="{!qLine.Customer_List_Price_Total__c}" />
          </apex:outputText>

          <apex:outputText value="{0, number,###,##0}" rendered="{!IsCustomerQuote}">
            <apex:param value="{!qLine.Customer_List_Price_Total__c - qLine.Customer_Discount_Amount__c}" />
          </apex:outputText>

        </td>
        <apex:variable var="sr" value="{!sr + 1}" />
        <div style="page-break-before:always;" />



      </tr>
    </apex:repeat>
  </tbody>

</table>

谢谢，
拉惹

Answer 1

@media print { table {page-break-inside: avoid;} }

添加上述 css 样式以避免数据单元格在页面末尾被拆分。

---

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

添加上述 css 样式以在每个页面上重复标题。