Две таблицы 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

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

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

Answer 2

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

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

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

Answer 4

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

Answer 5

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

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

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

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

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

<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 с маркой autos).

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

Answer 8

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

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

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

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

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>