Две HTML-таблицы рядом, по центру страницы

Question

У меня есть две таблицы на странице, которые я хочу отображать рядом, а затем расположить их по центру на странице (на самом деле в другом элементе 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>

Я понимаю, что это как-то связано с тем, что таблицы всплывают, но я не могу понять, что мне не хватает. Есть много веб-страниц, которые описывают что-то вроде техники, которую я показываю здесь, но в любом случае она не работает; столы упрямо цепляются за левый край.

Answer 1

Если бы это был я - я бы сделал что-то вроде этого:

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

Answer 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 с полями auto). *

Я заключаю, что есть некоторые макеты, которые могут быть достигнуты только с помощью таблиц.

Answer 3

Я понимаю, что это древний вопрос, но здесь все равно.

Следующее будет работать в совместимых браузерах и IE8 в стандартном режиме (т.е. с набором типа документа).

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

К сожалению, на самом деле нет способа настроить его на работу в IE6. Для IE7 добавление масштаба: 1 к элементам .t (с помощью условного комментария) может помочь, но у меня нет IE7, доступного для тестирования в данный момент.

Answer 4

Проблема в том, что вам нужно дать #inner набор width (что угодно, кроме auto или inherit). Трюк margin: 0 auto; работает только в том случае, если внутренний элемент уже его контейнерного элемента. Без указания width, #inner автоматически расширяется до полной ширины #outer, что приводит к тому, что его содержимое отображается влево.

Answer 5

Дайте вашему внутреннему 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>

Answer 6

Вне моей головы, вы можете попробовать использовать «margin: 0 auto» для #outer, а не # inner.

Я часто добавляю цвет фона в свои DIV, чтобы посмотреть, как они выглядят на виде. Это может быть хорошим способом диагностики того, что здесь происходит.

Answer 7

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

Answer 8

Проблема в том, что DIV, который должен центрировать ваши таблицы, не имеет определенной ширины. По умолчанию DIVs являются блочными элементами и занимают всю ширину своего родителя - в этом случае весь документ (распространяется через #outer DIV), поэтому стиль автоматического поля не действует.

Чтобы эта техника работала, вам просто нужно установить ширину div, у которого есть запас: auto для чего угодно, кроме «auto» или «наследовать» (либо фиксированное значение пикселя, либо процент).

Answer 9

Я обнаружил, что могу решить эту проблему, просто поместив две соседние таблицы внутрь третьей таблицы, которая была отцентрирована. Вот код

Я добавил две строки кода вверху и внизу двух существующих таблиц

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