выравнивание текста в таблице в ячейке (<table> внутри <td>) - PullRequest
Новая
       62

выравнивание текста в таблице в ячейке (<table> внутри <td>)

14 голосов
/ 10 ноября 2011

Вот то, о чем я никогда не думал, что скажу: у меня проблема в 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>

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

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

Ответы [ 4 ]

9 голосов
/ 10 ноября 2011

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

6 голосов
/ 02 ноября 2012

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

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

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

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

1 голос
/ 25 декабря 2013

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

table {
  display: inline-block;
}

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

0 голосов
/ 13 февраля 2014

когда вы не хотите, чтобы 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>

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

...