Две таблицы 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>
Я понимаю, что это как-то связано с тем, что таблицы плавают, но я не понимаю, что мне не хватает. Есть много веб-страниц, которые описывают что-то вроде техники, которую я здесь показываю, но в любом случае она не работает; столы цепляться упорно на левом поле.
Ответы 10
Вне моей головы, вы можете попробовать использовать "margin: 0 auto" для #outer, а не для #inner.
Я часто добавляю фоновый цвет к своим DIV, чтобы увидеть, как они размещаются в представлении. Это может быть хорошим способом диагностировать, что здесь происходит.
Проблема в том, что DIV, который должен центрировать ваши таблицы, не имеет ширины. По умолчанию DIV являются блочными элементами и занимают всю ширину своего родителя - в данном случае весь документ (распространяется через #outer DIV), поэтому автоматический стиль полей не действует.
Чтобы этот метод работал, вам просто нужно установить ширину div, у которого есть margin: auto, на любое значение, кроме «auto» или «inherit» (либо фиксированное значение пикселя, либо процент).
Дайте вашему внутреннему 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>
Мм понятно. Проблема в том, что таблицы генерируются динамически. Я не могу настроить значение пикселя, чтобы все было хорошо.
Если это так, то, к сожалению, вы не можете делать то, что просите.
Проблема в том, что вам нужно дать #inner набор width (что угодно, кроме auto или inherit). Уловка margin: 0 auto; работает только в том случае, если внутренний элемент уже, чем его контейнерный элемент. Без предоставления width, #inner автоматически расширяется до полной ширины #outer, в результате чего его содержимое выравнивается по левому краю.
Если бы это был я - я бы сделал со столом примерно так:
<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>если вы не можете установить ширину, как указано в комментарии ниже, установите overflow: hidden в контейнере, чтобы контейнер не рухнул.
<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>
К сожалению, все эти решения полагаются на указание фиксированной ширины. Поскольку таблицы генерируются динамически (статистические результаты извлекаются из базы данных), ширина не может быть известна заранее.
Желаемого результата можно достичь, заключив две таблицы в другую таблицу:
<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 с автоматическими полями).
Я прихожу к выводу, что есть некоторые схемы, которые могут быть достигнуты только с помощью таблиц.
то, что я бы сделал, тогда dland - это использовать что-то вроде jQuery для определения ширины таблиц, а затем сложить две суммы вместе, чтобы определить ширину, необходимую для контейнера.
Я понимаю, что это древний вопрос, но все равно остается.
Следующее будет работать в совместимых браузерах и IE8 в стандартном режиме (т.е. с заданным типом документа).
#inner {text-align:center;}
.t {display:inline-block;}
К сожалению, на самом деле нет возможности настроить его для работы в IE6. Для IE7 добавление zoom: 1 к div .t (с помощью условного комментария) может помочь, но в настоящий момент у меня нет IE7, доступного для тестирования.
+1 за отправку на старый вопрос! Тем временем я также нашел решение с использованием display: table-cell, которое, как вы можете себе представить, терпит неудачу в IE6. Я, наконец, бросил полотенце и добавил несколько злобных комментариев IE6 для создания элементов <table>, <tr>, <td> для IE6. Кажется, работает достаточно хорошо.
AFAIK, никакая версия IE не поддерживает display: table-cell, поэтому я выбрал встроенный блок. Кстати, я только что протестировал его, и в IE7 я заставил таблицы располагаться бок о бок, добавив ".t {display: inline; zoom: 1;}" в условный комментарий.
Я обнаружил, что могу решить эту проблему, просто поместив две соседние таблицы внутри третьей таблицы, расположенной по центру. Вот код
Я добавил две строки кода вверху и внизу двух существующих таблиц.
<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>Я предложил два решения. Выберите тот, который вам больше всего подходит.
Решение №1:
<html>
<style>
#container {
width: 50%;
margin: auto;
text-align: center;
}
#first {
width:48%;
float: left;
height: 200px;
background-color: blue;
}
#second {
width: 48%;
float: left;
height: 200px;
background-color: green;
}
#clear {
clear: both;
}
#space{
width: 4%;
float: left;
height: 200px;
}
table{
border: 1px solid black;
margin: 0 auto;
table-layout:fixed;
width:100%;
text-align:center;
}
</style>
<body>
<div id = "container" >
<div id = "first">
<table>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
</tr>
</table>
</div>
<div id = "space" >
</div>
<div id = "second" >
<table>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
</tr>
</table>
</div>
<div id = "clear" ></div>
</div>
</body>
</html>Решение №2:
<html>
<style>
#container {
margin:0 auto;
text-align: center;
}
#first {
float: left;
}
#second {
float: left;
}
#clear {
clear: both;
}
#space{
width:20px;
height:20px;
float: left;
}
.table, .table th, .table td{
border: 1px solid black;
}
</style>
<body>
<table id = "container" >
<td>
<div id = "first">
<table class = "table">
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
</tr>
</table>
</div>
<div id = "space" >
</div>
<div id = "second" >
<table class = "table">
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
</tr>
</table>
</div>
<div id = "clear" ></div>
</div>
</td>
</table>
</body>
</html>Примечание. Измените процент ширины в соответствии с вашими потребностями в 1-м решении.
Авто пробовал везде, без радости. Также попробовал трюк с цветом фона (на самом деле я предпочитаю границу: сплошной черный 1px, но я отвлекся). Проблема в том, что #inner занимает всю ширину, и таблицы не покрываются им, так как они плавают ...