2017-07-27 4 views
2

私は私のXSL-FO文書に背景のこの種を作成したいと思います:1行に3つのセルの背景色を増やすにはどうすればいいですか?

Gradually increasing color for background

私は敏感な情報をぼかし、うまくいけば、まだそれを取得グレー色でなければならないことは十分見えます細胞間で増加した。

これは、その背後にある私のコードです:

<!-- table header --> 
      <fo:table table-layout="fixed" width="100%" background-color="#FFFFFF"> 
       <fo:table-body> 
        <fo:table-row> 
         <fo:table-cell margin-left="55pt" padding-after="10pt"> 
          <fo:block-container xsl:use-attribute-sets="boldtext"> 
           <fo:block> 
            1st column header 
           </fo:block> 
          </fo:block-container> 
         </fo:table-cell> 
         <fo:table-cell padding-left="30pt" padding-after="10pt"> 
          <fo:block-container xsl:use-attribute-sets="boldtext"> 
           <fo:block> 
            2nd column header 
           </fo:block> 
          </fo:block-container> 
         </fo:table-cell> 
         <fo:table-cell padding-left="15pt" padding-after="10pt"> 
          <fo:block-container xsl:use-attribute-sets="boldtext"> 
           <fo:block> 
            3rd column header 
           </fo:block> 
          </fo:block-container> 
         </fo:table-cell> 
        </fo:table-row> 
       </fo:table-body> 
      </fo:table> 
+0

三角形のSVGを作成し、テーブルの後ろに使用します。それが壊れた場合は、中央のセルの左右に白い枠線を使用します。 –

答えて

1

あなたがRenderX提供を使用している場合は、背景画像を拡大縮小するために彼らの拡張機能を使用することができます。この解決策は、このようになります。それは、行数および/またはサイズのテーブルに完全に拡大縮小されます。あなたの例では、他に何がテーブルにあるのかは不明です。

<fo:table table-layout="fixed" width="100%" background-image="tri.svg" background-position="bottom left" background-repeat="no-repeat" rx:background-content-width="scale-to-fit" rx:background-content-height="scale-to-fit" rx:background-scaling="non-uniform"> 
      <fo:table-body > 
       <fo:table-row> 
        <fo:table-cell> 
         <fo:block-container > 
          <fo:block> 
           1st column header 
          </fo:block> 
         </fo:block-container> 
        </fo:table-cell> 
        <fo:table-cell border-left="5pt solid white" border-right="5pt solid white"> 
         <fo:block-container > 
          <fo:block> 
           2nd column header 
          </fo:block> 
         </fo:block-container> 
        </fo:table-cell> 
        <fo:table-cell> 
         <fo:block-container> 
          <fo:block> 
           3rd column header 
          </fo:block> 
         </fo:block-container> 
        </fo:table-cell> 
       </fo:table-row> 
       <fo:table-row> 
        <fo:table-cell> 
         <fo:block-container > 
          <fo:block> 
           1st column header 
          </fo:block> 
         </fo:block-container> 
        </fo:table-cell> 
        <fo:table-cell border-left="5pt solid white" border-right="5pt solid white"> 
         <fo:block-container > 
          <fo:block> 
           2nd column header 
          </fo:block> 
         </fo:block-container> 
        </fo:table-cell> 
        <fo:table-cell> 
         <fo:block-container> 
          <fo:block> 
           3rd column header 
          </fo:block> 
         </fo:block-container> 
        </fo:table-cell> 
       </fo:table-row> 
       <fo:table-row> 
        <fo:table-cell> 
         <fo:block-container > 
          <fo:block> 
           1st column header 
          </fo:block> 
         </fo:block-container> 
        </fo:table-cell> 
        <fo:table-cell border-left="5pt solid white" border-right="5pt solid white"> 
         <fo:block-container > 
          <fo:block> 
           2nd column header 
          </fo:block> 
         </fo:block-container> 
        </fo:table-cell> 
        <fo:table-cell> 
         <fo:block-container> 
          <fo:block> 
           3rd column header 
          </fo:block> 
         </fo:block-container> 
        </fo:table-cell> 
       </fo:table-row> 
       <fo:table-row> 
        <fo:table-cell> 
         <fo:block-container > 
          <fo:block> 
           1st column header 
          </fo:block> 
         </fo:block-container> 
        </fo:table-cell> 
        <fo:table-cell border-left="5pt solid white" border-right="5pt solid white"> 
         <fo:block-container > 
          <fo:block> 
           2nd column header 
          </fo:block> 
         </fo:block-container> 
        </fo:table-cell> 
        <fo:table-cell> 
         <fo:block-container> 
          <fo:block> 
           3rd column header 
          </fo:block> 
         </fo:block-container> 
        </fo:table-cell> 
       </fo:table-row> 
       <fo:table-row> 
        <fo:table-cell> 
         <fo:block-container > 
          <fo:block> 
           1st column header 
          </fo:block> 
         </fo:block-container> 
        </fo:table-cell> 
        <fo:table-cell border-left="5pt solid white" border-right="5pt solid white"> 
         <fo:block-container > 
          <fo:block> 
           2nd column header 
          </fo:block> 
         </fo:block-container> 
        </fo:table-cell> 
        <fo:table-cell> 
         <fo:block-container> 
          <fo:block> 
           3rd column header 
          </fo:block> 
         </fo:block-container> 
        </fo:table-cell> 
       </fo:table-row> 
      </fo:table-body> 
     </fo:table> 

これは、その結果:

enter image description here

あなたはFOPを使用している場合は、あれば、テーブルのためのSVGをそのような拡張が存在し、あなたはおそらくサイズに必要があると私には明確ではありません知られている。

+0

ケビン、多分私はそれを理解していない、私はこれに新しいので、それを残念。私はちょうどあなたまたは次の人に私のために働いた正確なコードが何であったかを知りたいと思っていました(コピー&ペーストだけで私に必要な結果が得られませんでした)ので、コメントにコードを入力できません。しかし、次回はそれをやりません。 – Meredydd

+0

@Meredydd答えを受け入れることができるはずです(緑のチェックマーク)。あなたは質問に2つのことがあるように質問しました - 有益な答えをアップアップし、答えを受け入れる。便利な情報を追加したい場合は、コメントに追加したり、質問を編集したりすることもできます。 –

関連する問題