#css #html-table #alignment #cell
#css #html-таблица #выравнивание #ячейка
Вопрос:
Вот то, о чем я никогда не думал, что скажу: у меня проблема в 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?
Комментарии:
1. Я думаю, что это правильно в FF и Chrome. Таблица не является текстом, поэтому выравнивание текста не должно влиять на нее. выравнивание должно работать с любым содержимым.
2. Спасибо — итак, как бы мне использовать css для выравнивания таблицы в ячейке? Это что-то новое? Я вернулся к созданию веб-сайтов через пару лет, и у меня никогда раньше не было этой проблемы?
3. Выравнивание текста влияет на встроенные элементы и встроенные блоки, а не только на текст.
4. добавьте к свойству отображения вложенной таблицы и установите для него значение inline-block <граница таблицы=»1″ стиль =»отображение:встроенный блок»>
Ответ №1:
Я предполагаю, что Chrome и FF на самом деле отображают это правильно. text-align вероятно, это не должно влиять на table элементы. Однако применение float:right к таблице приведет к тому, что вы хотите.
Комментарии:
1. Большое вам всем спасибо! Именно то, что я хотел.
Ответ №2:
Я хотел бы добавить, что CSS-способ выравнивания таблиц относительно их контейнера — это свойство margin .
Вы должны добавить, margin: 0 auto; хотите ли вы выровнять его по центру или margin-left: auto; хотите ли вы выровнять его по правому краю.
Как говорит @maxedison, text-align будет работать только с элементами inline и inline-block , поэтому другое решение — изменить вашу внутреннюю таблицу, чтобы она принимала некоторые из этих отображаемых значений.
Вам также нужно помнить, что text-align работает из ‘container-to-content’, это означает, что он обычно применяется к контейнеру, чтобы повлиять на его содержимое (применяется к a p , чтобы повлиять на его встроенное содержимое, такое как текст внутри), и margin: 0 auto работает из ‘content-to-container’, что означает, что он обычно применяется к элементу блока и влияет на его положение, связанное с его контейнером (применяется к a 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>
Похоже, что выравнивание текста (с DOCTYPE html) влияет только на встроенный блок в Chrome, а не на элемент inline only. Замена встроенного блока на встроенный здесь, и это больше не работает в моем Chrome