Невозможно выровнять HTML-таблицы параллельно друг другу

#html #css #datagrid

#HTML #css #datagrid

Вопрос:

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

Я использую align = right, но таблица выравнивается вниз (одна под другой) и не смещается вправо в параллельном порядке. Может кто-нибудь подсказать, где я допускаю ошибку в приведенном ниже коде и как я могу это исправить?

P.S: Мою проблему с кодом ниже можно проверить, скопировав и сохранив ее, скажем, в блокноте test.txt и переименовать его в test.html и откройте его в браузере IE или Firefox.

 <table id="ss" class="easyui-datagrid" style="width:380px;height:auto;">
  <thead>
    <tr><th field="name2" width="80">Status</th></tr>
  </thead>
  <tbody>
    <tr> <td>India</td></tr>
    <tr><td>Canada</td></tr>
    <tr><td>USA</td></tr>
    <tr><td>UK</td></tr>
  </tbody>
</table>
<table id="vv" class="easyui-datagrid" style="width:380px;height:auto;" align = "right">
  <thead>
    <tr><th field="name3" width="80">Status</th></tr>
  </thead>
  <tbody>
    <tr><td>India</td></tr>
    <tr><td>China</td></tr>
    <tr><td>Oz</td></tr>
    <tr><td>UK</td></tr>
  </tbody>
</table>

Ответ №1:

Вот ваше решение:

     <div style="float:left;"><table id="ss" class="easyui-datagrid" style="width:380px;height:auto;">
  <thead>
    <tr><th field="name2" width="80">Status</th></tr>
  </thead>
  <tbody>
    <tr> <td>India</td></tr>
    <tr><td>Canada</td></tr>
    <tr><td>USA</td></tr>
    <tr><td>UK</td></tr>
  </tbody>
</table>
</div>
<div style="float:left;"><table id="vv" class="easyui-datagrid" style="width:380px;height:auto;">
  <thead>
    <tr><th field="name3" width="80">Status</th></tr>
  </thead>
  <tbody>
    <tr><td>India</td></tr>
    <tr><td>China</td></tr>
    <tr><td>Oz</td></tr>
    <tr><td>UK</td></tr>
  </tbody>
</table>
</div>

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

2. Для этого вы можете указать margin-left:50px; для второго div.

Ответ №2:

Вы имеете в виду, что хотите, чтобы таблицы располагались рядом, а не одна под другой?

Вы можете либо добавить a float: left в первую таблицу (и не забудьте очистить после второй таблицы), либо поместить каждую из таблиц в a div и установить display: inline-block на них div .

1. Да, я хочу создавать таблицы рядом и с некоторым разделением между ними для лучшего внешнего вида. Не могли бы вы подробнее рассказать о предложенном вами подходе?

Ответ №3:

 jsfiddle.net/S45CQ/

используйте свойство float:left и либо уменьшите ширину таблицы, либо поместите их в div-оболочку.

Также удалите два закрывающих тега body из вашего html.

Ответ №4:

Стиль align right в таблице выровняет все элементы внутри справа. (текст, изображения и т.д. в каждом столбце).

Вам нужно добавить «float: left;» в стиле.

Ответ №5:

Смотрите здесь: http://jsfiddle.net/TmC4C /

Вам также необходимо указать align="left" в вашей первой таблице. Хотя вам гораздо лучше использовать вместо этого числа с плавающей запятой.

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