Question

我有一个脚本从XML文件中提取数据并使用它创建和填充表格，

我希望桌子彼此相邻，但我希望它居中，所以如果我有三张桌子，中间的桌子就会与屏幕中间相匹配，

我尝试将表边距设置为（margin: 0 auto;）并在正在创建的表周围放置<CENTER>标记。

也许这会澄清它

foreach($file->book as $book)
{
 echo"  <TABLE BORDER=\"1\" ID=\"new_book\">
   <TR CLASS=\"title\">
    <TH COLSPAN=\"2\" ID=\"title\">
     $book->title
    </TH>
   </TR>
   <TR CLASS=\"author\">
    <TD ID=\"label\">
     &nbsp;Author:&nbsp;
    </TD>
    <TD ID=\"author\">
     &nbsp;$book->author&nbsp;
    </TD>
   </TR>
   <TR>
    <TD>
     &nbsp;Age Range:&nbsp;
    </TD>
    <TD>
     &nbsp;$book->age_range&nbsp;
    </TD>
   </TR>
   <TR>
    <TD>
     &nbsp;Protagonist:&nbsp;
    </TD>
    <TD>
     &nbsp;$book->protagonist&nbsp;
    </TD>
   </TR>
   <TR>
    <TD>
     &nbsp;Antagonist:&nbsp;
    </TD>
    <TD>
     &nbsp;$book->antagonist&nbsp;
    </TD>
   </TR>
  </TABLE>";
}

这个脚本将从xml文件中提取数据，并创建一本书的列表，会有多本书，我希望将它们居中，同时保持它们靠近页面的中间位置。

Answer 1

我认为你需要的是这样的： HTML：

<div class="wrapper">
   <table></table>
   <table></table>
   <table></table>
</div>

CSS：

.wrapper {
   text-align: center;
}
.wrapper table {
   display: inline-block;
}

这会使表格对齐，或者你可以根据你需要的浏览器支持使用flexbox。

我为此创造了一个小提琴：http://jsfiddle.net/hja5cgax/

Answer 2

尝试运行此HTML代码。

<div style="width:100%;">

    <div style="width:33.33%;float:left;background-color:#f00;">
        <table border='1'>
        <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        </tr>
        </table>
    </div>

    <div style="width:33.33%;float:left;background-color:0f0">
        <table border='1' style="margin:0 auto">
        <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        </tr>
        </table>
    </div>

    <div style="width:33.33%;float:left;background-color:00f">
        <table border='1'>
        <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        </tr>
        </table>
    </div>

</div>

Answer 3

为了使所有表都居中，你需要一个额外的容器来包装它们，就像这样

#wrapper {
  text-align:center;
}
table {
  border: 1px solid #ccc;
  display:inline-table;
}

您也可以将text-align:center附加到body元素。

浏览器可以使用inline-block属性的display值呈现相同的结果，但根据W3C，这不是正确的值。因此，应使用inline-table值，如上所示。

这是标记

<div id="wrapper">  
  <table>
    <tr>
      <td>first</td>
      <td>second</td>
      <td>third</td>
    </tr>
  </table>
  <table>
    <tr>
      <td>first</td>
      <td>second</td>
      <td>third</td>
    </tr>
  </table>
  <table>
    <tr>
      <td>first</td>
      <td>second</td>
      <td>third</td>
    </tr>
  </table>
</div>

Working jsBin

Answer 4

使用答案中的想法，我想出了如何使表格正确居中

使用此代码

 <DIV ID="wrapper">  
  <DIV ID="wrapped">  
   <?php  

   $file = simplexml_load_file("index.xml");

foreach($file->book as $book)
{
 echo"  <TABLE BORDER=\"1\" ID=\"new_book\">
   <TR CLASS=\"title\">
    <TH COLSPAN=\"2\" ID=\"title\">
     $book->title
    </TH>
   </TR>
   <TR CLASS=\"author\">
    <TD ID=\"label\">
     &nbsp;Author:&nbsp;
    </TD>
    <TD ID=\"author\">
     &nbsp;$book->author&nbsp;
    </TD>
   </TR>
   <TR>
    <TD>
     &nbsp;Age Range:&nbsp;
    </TD>
    <TD>
     &nbsp;$book->age_range&nbsp;
    </TD>
   </TR>
   <TR>
    <TD>
     &nbsp;Protagonist:&nbsp;
    </TD>
    <TD>
     &nbsp;$book->protagonist&nbsp;
    </TD>
   </TR>
   <TR>
    <TD>
     &nbsp;Antagonist:&nbsp;
    </TD>
    <TD>
     &nbsp;$book->antagonist&nbsp;
    </TD>
   </TR>
  </TABLE>";
}

?>

   </DIV>
  </DIV>

css文件看起来像这样

body
{
 background: #000000;
}

#new_book
{
 float: left;
 margin: 10px;
 background: #FFFFFF;
 border: none;
 border-spacing: 5px;
 border-collapse: separated;
 display:inline-table;
}

#title
{
 text-transform: uppercase;
}

#wrapper
{
 text-align: center;
}

#wrapped
{
 display: inline-block;
 margin: 0 auto;
}

css使表彼此相邻但居中

4 个答案: