2017-10-09 15 views
0

HTML로 표시 할 송장이 있습니다. 내가 XSLT 통해 HTML 위해 XML을 tranforming 그리고 난 기본적으로 가지고 : 나는이 개 다른 섹션, 각 섹션은 두 테이블이 다른 다른 섹션에서 센터링되고 정렬되도록 테이블을 설정할 수 없습니다.

  • 위의 하나에 표시해야

    • 4 테이블을, 그들은해야 페이지의 대부분을 덮는 가운데에 놓여 짐
    • 다른 섹션의 테이블이 동일한 수직 위치에 있도록 테이블도 수직으로 정렬되어야합니다.

    첫 번째 문제는 제 3의 테이블을 다른 섹션으로 만들 수 없다는 것입니다. div를 사용하여 분리해도 동일한 행의 모든 ​​테이블을 볼 수 있습니다. 그들은 같은 라인에있는 모든되도록

    <?xml version="1.0" encoding="UTF-8"?> 
    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
    
        <xsl:template match="/"> 
    <html> 
    <head> 
    <!-- CSS goes in the document HEAD or added to your external stylesheet --> 
    <style type="text/css"> 
    .zui-table { 
        border: solid 1px #DDEEEE; 
        border-collapse: collapse; 
        border-spacing: 0; 
        font: normal 16px Arial, sans-serif; 
        margin-left:auto; 
        margin-right:auto; 
        float:left; 
    
    #top 
    { 
        width: 100%; /* si adatta in larghezza a alle 
            risoluzioni di tutti i browser */ 
        height: 50px; 
        margin-bottom:10px; 
    h1 { 
         position: relative; 
         font-size: 30px; 
         font-family:Mistral; 
         margin-top: 0; 
         color: #b34d4d; 
        } 
    
    </style> 
    
    </head> 
        <body> 
    
         <div id="top"><h1><center>TEST CBF INVOICE</center></h1></div> 
    
         <div align="center"> 
         <table class="zui-table zui-table-rounded"> 
         <th colspan="2" class="zui-table thead th">INVOICE DETAILS</th> 
         <xsl:for-each select="//B0100_invoice_number_block"> 
          <xsl:if test="position() = 2"> 
    
          <tr> 
           <td>BILL ID</td> 
           <td><xsl:value-of select="D0101" /></td> 
          </tr> 
          <tr> 
           <td>START INVOICE PERIOD</td> 
           <td><xsl:value-of select="D0102" /></td> 
          </tr> 
          <tr> 
           <td>END INVOICE PERIOD</td> 
           <td><xsl:value-of select="D0103" /></td> 
          </tr> 
          <tr> 
           <td>INVOICE DATE</td> 
           <td><xsl:value-of select="D0104" /></td> 
          </tr> 
          <tr> 
           <td>DUE DATE</td> 
           <td><xsl:value-of select="D0105" /></td> 
          </tr> 
          </xsl:if> 
         </xsl:for-each> 
         </table> 
         <table class="zui-table zui-table-rounded"> 
         <tr> 
          <th>ACCOUNT DETAILS</th> 
         </tr> 
         <xsl:for-each select="//B0600_mobile_number_block"> 
         <xsl:if test="position() = 2"> 
    
         <tr> 
          <td>ACCOUNT ID</td> 
          <td><xsl:value-of select="subs_id"/></td> 
         </tr> 
         <tr> 
          <td>MSISDN</td> 
          <td><xsl:value-of select="D0601_MSISDN"/></td> 
         </tr> 
         </xsl:if> 
         </xsl:for-each> 
         </table>   
         </div> 
    
         <div> 
         <table class="zui-table zui-table-rounded"> 
         <tr> 
          <th>ACCOUNT Invoice Summary</th> 
         </tr> 
    
         <xsl:for-each select="//B09001/details"> 
         <tr> 
          <td><xsl:value-of select="descr_en"/></td> 
          <td><xsl:value-of select="Amt"/></td> 
         </tr> 
    
         </xsl:for-each> 
         <xsl:for-each select="//B09002/details"> 
         <tr> 
          <td><xsl:value-of select="descr_en"/></td> 
          <td><xsl:value-of select="Amt"/></td> 
         </tr> 
         </xsl:for-each> 
         </table> 
         <table class="zui-table zui-table-rounded"> 
         <tr> 
          <th>Subscriber Invoice Summary</th> 
         </tr> 
         <xsl:for-each select="//BS09001/details"> 
         <tr> 
          <td><xsl:value-of select="descr_en"/></td> 
          <td><xsl:value-of select="Amt"/></td> 
         </tr> 
         </xsl:for-each> 
         <xsl:for-each select="//BS09002/details"> 
         <tr> 
          <td><xsl:value-of select="descr_en"/></td> 
          <td><xsl:value-of select="Amt"/></td> 
         </tr> 
         </xsl:for-each> 
         </table> 
         </div> 
        </body> 
    </html> 
    
  • 답변

    0

    float: left 그것을 만드는 :

    여기에 아래의 코드입니다. 테이블 자체가 아니라 테이블을 포함하는 div를 정렬해야합니다. 또한 align=center의 div는 테이블 중 1에만 있습니다. 두 섹션은 div에 래핑되어야하며 해당 div는 가운데 div로 감싸 야합니다.

    저는 jsfiddle으로 작업했습니다.