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

Для меня мой файл gitignore игнорировал мою папку с папками. Следующая строка gitignore вызывала проблему -

**/packages/*

Удалена и она восстановила папку моих пакетов. Надеюсь, это помогает кому-то другому.

25
задан sblundy 7 December 2008 в 00:05
поделиться

8 ответов

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

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

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

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

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

22
ответ дан SaiyanGirl 15 October 2019 в 15:21
поделиться

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

<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>
20
ответ дан Tim Knight 15 October 2019 в 15:21
поделиться

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

5
ответ дан gregnostic 15 October 2019 в 15:21
поделиться

Дайте Вашему внутреннему отделению ширину.

ПРИМЕР

Изменение Ваш 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>
3
ответ дан Andrew G. Johnson 15 October 2019 в 15:21
поделиться

Первое, что пришло на ум Вы могли бы попытаться использовать "поле: 0 автоматических" для #outer, а не #inner.

я часто добавляю цвет фона к своим ОТДЕЛЕНИЯМ, чтобы видеть, как они размечают на представлении. Это могло бы быть хорошим способом диагностировать то, что идет onn сюда.

2
ответ дан Jim Nelson 15 October 2019 в 15:21
поделиться

Проблема состоит в том, что DIV, который должен центрировать Ваши таблицы, не имеет никакой определенной ширины. По умолчанию ОТДЕЛЕНИЯ являются элементами блока и поднимают всю ширину их родителя - в этом случае весь документ (распространяющий через #outer DIV), таким образом, автоматический граничный стиль не имеет никакого эффекта.

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

1
ответ дан Eran Galperin 15 October 2019 в 15:21
поделиться
<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>
1
ответ дан BenMaddox 15 October 2019 в 15:21
поделиться

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

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

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

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

14
ответ дан 28 November 2019 в 06:28
поделиться
Другие вопросы по тегам:

Похожие вопросы: