Chrome не учитывает свойство отображения элементов таблицы

Question

Есть ли какая-то особая причина, по которой chrome не учитывает "display:inline", когда он используется на "<table>", и существует ли известный обходной путь? В Firefox все работает нормально, но по какой-то причине Chrome отказывается делать правильные вещи, когда я печатаю

<table style="display:inline;">
    table stuff
</table>

Firefox выравнивание: Firefox выравнивание http://dkarapet.userworld.com/cart_noDB/firefox_alignment.png

хромированная регулировка: хромированная регулировка http://dkarapet.userworld.com/cart_noDB/chrome_alignment.png

Обе версии используют один и тот же источник html, который устанавливает для свойства display значение inline. Таблицы по отдельности не обернуты внутри любого другого div, и все они заключены в один большой div. Вот pastie для соответствующей части HTML.

Answer 1

Попробуйте inline-block.

Answer 2

CSS 2.1 определяет inline-table. Не знаю, насколько широко он поддерживается, но, похоже, это то, что вы ищете.

http://www.w3.org/TR/CSS21/tables.html#table-display

Хотя со скриншота это выглядит так, как будто вы действительно хотите контролировать вертикальное выравнивание.

Answer 3

С какой стати вы устанавливаете элемент таблицы как встроенный? Это должно быть отображение таблицы. Ошибка пользователя IMO.

Вам придется изменить режим отображения всех элементов tr и td внутри, иначе они будут отображаться неправильно, скорее всего.

Если вам нужно, чтобы таблица находилась в одной строке с другим элементом, оберните элемент div вокруг таблицы и поместите его. Не связывайтесь со столом.

РЕДАКТИРОВАТЬ: Как я указывал в моем последнем комментарии, вы должны связываться с vertical-align и, вероятно, установить его в верхней части таблицы.

Answer 4

Чтобы получить то, что вам нужно, вам просто нужно добавить это к каждому тд:

<td valign="top">

Это заставит все наверху каждой ячейки и заставит вещи отображать inline, какВы хотите, чтобы они.Здесь CSS не нужен.

Его СЛЕДУЕТ кодировать следующим образом:

<table>
 <tr>
  <td valign="top">item 1 info</td>
  <td valign="top">item 2 info</td>
  <td valign="top">item 3 info</td>
 </tr>
 <tr>
  <td valign="top">item 4 info</td>
  <td valign="top">item 5 info</td>
  <td valign="top">item 6 info</td>
 </tr>
</table>

edit: или если (по какой-то причине) вы не используете TR и TDВы можете попробовать это:

<table style="vertical-align:top;">
    table stuff
</table>