28

ページに 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 ページはたくさんありますが、いずれにせようまくいきません。テーブルは頑固に左側の余白にしがみついています。

4

10 に答える 10

24

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

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

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

and the result is a perfectly centered pair of tables that responds fluidly to arbitrary widths and page (re)sizes (and the align="center" table attribute could be hoisted out into an outer div with margin autos).

I conclude that there are some layouts that can only be achieved with tables.

于 2008-12-07T12:01:48.297 に答える
22

それが私だったら、テーブルを次のようにします。

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

于 2008-12-06T23:28:17.150 に答える
14

これは古い質問だと思いますが、とにかく行きます。

以下は、標準モードの準拠ブラウザーおよび IE8 (つまり、doctype セットを使用) で機能します。

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

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

于 2009-11-11T18:00:28.447 に答える
5

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

于 2008-12-06T23:10:39.510 に答える
3

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

例

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>
于 2008-12-06T23:10:02.410 に答える
2

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

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

于 2008-12-06T23:02:55.670 に答える
1

中央に配置された 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>

于 2016-04-29T21:00:24.623 に答える
1

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

この手法を機能させるには、margin:auto を持つ div の幅を "auto" または "inherit" (固定ピクセル値またはパーセンテージ) 以外に設定するだけです。

于 2008-12-06T23:07:08.737 に答える
1 
<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>
于 2008-12-06T23:35:36.837 に答える