Text-align в таблице в ячейке (<table> внутри a <td>)

Здесь я никогда не думал, что скажу: у меня проблема в Firefox и Chrome, но она отлично работает в IE!

Это очень просто, но я не понимаю, почему он не работает:

У меня есть таблица внутри ячейки, и у меня есть style="text-align:right" в ячейке, но таблица остается в Firefox и Chrome (в IE она послушно идет вправо...). Если я поместил align = right в тег ячейки, тогда он будет работать, но я не хочу этого делать.

Код в основном:

<table width="1000" border="1" cellpadding="0" cellspacing="0">
<tr>
<td style="text-align:right">

<table border="1">
<tr><td>Hello</td><td>Hello 2</td></tr>
</table>

</td>

<td>Hello 2</td></tr>
</table>

Я не хочу, чтобы вложенная таблица была width = 100% или что-то в этом роде...

Может кто-нибудь объяснить мне, почему это не работает, и как его исправить, и, может быть, почему он работает в IE, но не Firefox или Chrome?

Ответ 1

Я предполагаю, что Chrome и FF на самом деле являются теми, которые правильно его отображают. text-align вероятно, не должен влиять на элементы table. Однако применение float:right к таблице сделает то, что вы хотите.

Ответ 2

Я хотел бы добавить, что способ CSS для выравнивания таблиц относительно его контейнера имеет свойство margin.

Вы должны добавить margin: 0 auto;, если вы хотите выровнять его по центру или margin-left: auto;, если вы хотите выровнять его вправо.

Как говорит @maxedison, text-align будет работать только с элементами inline и inline-block, поэтому другое решение изменит вашу внутреннюю таблицу, чтобы отобразить некоторые из этих отображаемых значений.

Также необходимо помнить, что text-align работает от "container-to-content", это означает, что он обычно применяется к контейнеру для воздействия на его содержимое (применяется к p для воздействия на его встроенное содержимое, например текст внутри), а margin: 0 auto работает от "content-to-container", что означает, что он обычно применяется к блочному элементу и влияет на его позицию, связанную с его контейнером (применяется к div, чтобы центрировать его со своим родителем).

Ответ 3

Если вы хотите исправить это (не с полной функциональностью), вы можете написать это:

table {
  display: inline-block;
}

Таким образом, ваша таблица может быть центрирована с помощью text-align: center;, если применяется к родительскому элементу.

Ответ 4

когда вы не хотите, чтобы div был плавающим, вы можете попробовать следующее: http://jsfiddle.net/NvEZ8/

<div style="text-align:right;">
   <table  style="display:inline-block">
       <tbody>
       <tr>
           <td></td>
           <td>one</td>
           <td>two</td>
       </tr>
       </tbody>
    </table>
</div>

Похоже, что text-align (с DOCTYPE html) влияет только на встроенный блок в Chrome, а не на встроенный только элемент. Замена встроенного блока inline здесь, и он больше не работает на моем Chrome