ループ内で自動マージンとインラインブロックを使用する

Question

whileループを使用して、いくつかのグループの人々を別のテーブルに表示しています。
inline-blockを使用すると、margin autoは機能しません。
私は
ベローが私のコードであるbrownserに、この2つのテーブルの表示インラインとキャンターをしたい：

<table style="display: inline-block; margin: auto;" class="table table-striped table-bordered" > 
<thead> 
    <tr> 
     <th colspan="2"> 
     manager group 2 
     </th> 
    </tr> 
    <tr> 
     <th>Manager Name</th> 
     <th>User Details</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>Kelvin</td> 
     <td><a href="admin_edit.php?id=<?php echo $mrow["id"]; ?>" >User Details</a></td> 
    </tr> 
</tbody> 
</table> 

<table style="display: inline-block; margin: auto;" class="table table-striped table-bordered" > 
<thead> 
    <tr> 
     <th colspan="2"> 
     manager group 1 
     </th> 
    </tr> 
    <tr> 
     <th>Manager Name</th> 
     <th>User Details</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>James</td> 
     <td><a href="admin_edit.php?id=<?php echo $mrow["id"]; ?>" >User Details</a></td> 
    </tr> 
</tbody> 
</table> 

Answer 1

margin: auto;がdisplay: inline-block;に設定要素に対して何もしない、あなたは実際の単位の値を設定する必要がありますpixel、ems、remsなどのマージンまで、要素は表示ブロックである必要があります（または、テーブルの場合、マージンはdisplay：table inで動作するため、テーブルの更新を気にする必要はありません）。同様の方法）

しかし、あなたは2つのテーブルこれらのテーブルはそれぞれ最大幅が設定された<div>にラップする必要があります。そして、必要に応じてこれらのdivをターゲットにしてテーブルをレイアウトすることができます。私は基本的なデモンストレーションを含んでいます（テーブルを横に並べて見るにはフルスクリーンで見る必要があります。だけでなく、あなたが応答インターフェイス上で作業している場合）：あなたのテーブルのdisplayがinline-blockあるとして、彼らはinline要素（のような<span>のようなページに流れているため

.txt-center { 
 
    text-align: center; 
 
} 
 

 
div > div{ 
 
    border: 1px solid; 
 
    display: inline-block; 
 
    margin-bottom: 12px; 
 
    max-width: 300px; 
 
    vertical-align: bottom; 
 
    padding: 8px; 
 
} 
 

 
table { 
 
    border: 1px solid; 
 
    min-width: 300px; 
 
} 
 

 
td { 
 
    border: 1px solid; 
 
}

<div class="txt-center"> 
 
    <div class="example"> 
 
    <table> 
 
     <tr> 
 
     <td> 
 
      example 
 
     </td> 
 
     <td> 
 
      example 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
    <div class="example"> 
 
    <table> 
 
     <tr> 
 
     <td> 
 
      example 
 
     </td> 
 
     <td> 
 
      example 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

Answer 2

margin: autoは動作しません） 。インライン要素に使用できる余分な水平スペースがないため（文字のみがそれ自体を認識します）、margin: autoはinlineまたはinline-block要素に「余白がありません」を意味します。

テーブルのdisplayがinline-blockであるとして、あなたは彼らの親コンテナにtext-align: centerを使用してそれらをセンタリングすることができます（bodyは、テーブルの親である場合）あなたのケースでは、一例を以下に添付されています

body { 
    text-align: center 
}