Два HTML-стола бок о бок, сосредоточенные на странице

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

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

Ответ 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>

Ответ 2

К сожалению, все эти решения полагаются на указание фиксированной ширины. Поскольку таблицы генерируются динамически (статистические результаты вытащили из базы данных), ширина не может быть известна заранее.

Желаемый результат может быть достигнут путем переноса двух таблиц в другую таблицу:

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

и результат представляет собой идеально центрированную пару таблиц, которая реагирует плавно на произвольную ширину и размер страницы (re) (и атрибут таблицы align = "center" можно было бы выровнять в внешний div с маржированными авто).

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

Ответ 3

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

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

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

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

Ответ 4

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

Ответ 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>

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

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

Ответ 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>