web-dev-qa-db-ja.com

ページの中央に並んだ2つのHTMLテーブル

ページに2つのテーブルを並べて表示し、それらをページ内の中央に配置します（実際には別のdiv内ですが、これは私が思いつく最も単純なものです）。

<style>
  #outer { text-align: center; }
  #inner { text-align: left; margin: 0 auto; }
  .t { float: left; }
  table { border: 1px solid black; }
  #clearit { clear: left; }
</style>

<div id="outer">
  <p>Two tables, side by side, centered together within the page.</p>

  <div id="inner">
    <div class="t">
      <table>
        <tr><th>a</th><th>b</th></tr>
        <tr><td>1</td><td>2</td></tr>
        <tr><td>4</td><td>9</td></tr>
        <tr><td>16</td><td>25</td></tr>
      </table>
    </div>

    <div class="t">
      <table>
        <tr><th>a</th><th>b</th><th>c</th></tr>
        <tr><td>1</td><td>2</td><td>2</td></tr>
        <tr><td>3</td><td>5</td><td>15</td></tr>
        <tr><td>8</td><td>13</td><td>104</td></tr>
      </table>
    </div>

  </div>
  <div id="clearit">all done.</div>
</div>

テーブルがフロートしているという事実と関係があることは理解していますが、不足しているものを理解することはできません。ここで紹介するテクニックのようなものを説明する多くのWebページがありますが、いずれにしても機能しません。テーブルは頑固に左マージンにしがみついています。

csscenteralignment
25
dland

残念ながら、これらのソリューションはすべて、固定幅の指定に依存しています。テーブルは動的に生成されるため（データベースから取得した統計結果）、幅を事前に知ることはできません。

2つのテーブルを別のテーブルにラップすることで、目的の結果を得ることができます。

<table align="center"><tr><td>
//code for table on the left
</td><td>
//code for table on the right
</td></tr></table>

結果は、任意の幅とページ（再）サイズに滑らかに応答する完全に中央に配置されたテーブルのペアです（さらに、align = "center"テーブル属性は、マージンオートで外側のdivに巻き上げられます）。

私は、テーブルでしか達成できないレイアウトがあると結論付けています。

22
dland

それが私だったら-私はこのようなことをします：

<style type="text/css" media="screen">
 table { border: 1px solid black;float:left;width:148px;}
 #table_container{width:300px;margin:0 auto;}
</style>

次のようなテーブルで：

<div id="table_container">
  <table>
    <tr>
      <th>a</th>
      <th>b</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>4</td>
      <td>9</td>
    </tr>
    <tr>
      <td>16</td>
      <td>25</td>
    </tr>
  </table>
  <table>
    <tr>
      <th>a</th>
      <th>b</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>4</td>
      <td>9</td>
    </tr>
    <tr>
      <td>16</td>
      <td>25</td>
    </tr>
  </table>
</div>
20
Tim Knight

これは古くからの質問ですが、とにかくここに行きます。

以下は、準拠モードのブラウザと標準モードのIE8（つまり、Doctypeセット）で動作します。

#inner {text-align:center;}
.t {display:inline-block;}

残念ながら、IE6で動作するように微調整する方法は本当にありません。 IE7の場合、zoom：1を.t divに（条件付きコメントを介して）追加すると役立つ場合がありますが、現時点ではIE7をテストに使用できません。

13
Martha

問題は、#innerにセットwidth（autoまたはinherit以外）を与える必要があることです。 margin: 0 auto;トリックは、内部要素がコンテナ要素よりも狭い場合にのみ機能します。 widthが与えられない場合、#innerは自動的に#outerの全幅に拡張され、その内容が左にフラッシュされます。

5
gregnostic

内側のdivに幅を与えます。

[〜＃〜] example [〜＃〜]

CSSを変更します。

<style>
#outer { text-align: center; }
#inner { text-align: left; margin: 0 auto; }
.t { float: left; }
table { border: 1px solid black; }
#clearit { clear: left; }
</style>

これに：

<style>
#outer { text-align: center; }
#inner { text-align: left; margin: 0 auto; width:500px }
.t { float: left; }
table { border: 1px solid black; }
#clearit { clear: left; }
</style>
3
Andrew G. Johnson

頭の中で、＃innerではなく#outerに "margin：0 auto"を使用してみてください。

私はよく、DIVに背景色を追加して、ビュー上での配置を確認します。これは、ここで何が起こっているかを診断する良い方法かもしれません。

2
Jim Nelson

問題は、テーブルを中央に配置するDIVに幅が定義されていないことです。デフォルトでは、DIVはブロック要素であり、親の幅全体（この場合はドキュメント全体（#outer DIVを介して伝播））を占めるため、自動マージンスタイルは効果がありません。

この手法が機能するには、margin：autoを持つdivの幅を「auto」または「inherit」以外の値（固定ピクセル値またはパーセンテージ）に設定するだけです。

1
Eran Galperin
<style>
#outer { text-align: center; }
#inner { width:500px; text-align: left; margin: 0 auto; }
.t { float: left; width:240px; border: 1px solid black;}
#clearit { clear: both; }
</style>
1
BenMaddox

中央にある3番目のテーブル内に2つのサイドバイサイドテーブルを置くだけで、これを解決できることがわかりました。ここにコードがあります

2つの既存のテーブルの上部と下部に2行のコードを追加しました

<style>
  #outer { text-align: center; }
  #inner { text-align: left; margin: 0 auto; }
  .t { float: left; }
  table { border: 1px solid black; }
  #clearit { clear: left; }
</style>

<div id="outer">

  <p>Two tables, side by side, centered together within the page.</p>

  <div id="inner">
   <table style="margin-left: auto; margin-right: auto;">
   <td>
    <div class="t">
      <table>
        <tr><th>a</th><th>b</th></tr>
        <tr><td>1</td><td>2</td></tr>
        <tr><td>4</td><td>9</td></tr>
        <tr><td>16</td><td>25</td></tr>
      </table>
    </div>

    <div class="t">
      <table>
        <tr><th>a</th><th>b</th><th>c</th></tr>
        <tr><td>1</td><td>2</td><td>2</td></tr>
        <tr><td>3</td><td>5</td><td>15</td></tr>
        <tr><td>8</td><td>13</td><td>104</td></tr>
      </table>
    </div>
    </td>
    </table>
  </div>
  <div id="clearit">all done.</div>
</div>
0
Technastar