无法将表格设置为在不同部分居中和对齐

Question

我有一张发票显示为 HTML。我正在通过 XSLT 将 XML 转换为 HTML，基本上：

4 table 我需要在 2 个不同的部分显示，一个在另一个之上
每个部分有 2 个 table，它们应该居中覆盖页面的大部分内容
tables 也应垂直对齐，以便不同部分中的 tables 处于相同的垂直位置。

我的第一个问题是我无法让第三个 table 进入不同的部分，我会在同一行中看到所有 table，即使我使用 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>

Answer 1

float: left 使得它们都在同一行。您必须对齐包含表格的 div 而不是表格本身。此外 div 和 align=center 仅在其中一张桌子上。两个部分都应包裹在 div 中，那些 div 应包裹在居中的 div.

中

我做了一个工作jsfiddle。

Answer 2

你应该使用

display: inline-block;
vertical-align: top;

代替float:left；

勾选https://jsfiddle.net/0k8zgteu/

无法将表格设置为在不同部分居中和对齐

Can't set tables to be centered and aligned in different sections

html

css

html-table

center