css使表格彼此相邻但居中

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 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 2

我认为你需要的是这样的： 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 3

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

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

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

浏览器可以使用inline-block 属性的inline-block 值呈现相同的结果，但根据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;
}