2017-10-09 44 views
0

我有一张要显示为HTML的发票。 我tranforming一个XML通过XSLT为HTML和我有基本上是:无法将表格设置为居中并在不同部分对齐

  • 4表即我需要显示在2个不同的部分,一个在另一个
  • 每个部分有2页以上的表,它们应居中涵盖大部分页面
  • 表格也应该垂直对齐,以便不同部分中的表格处于相同的垂直位置。

我的第一个问题是,我不能让第三个表进入另一个部分,我会看到所有的表都在同一行,即使我使用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只在其中的一个表上。 这两个部分都应该包装在一个div中,这些div应该包装在居中的div中。我的工作jsfiddle

相关问题