Как отображать таблицы встроенными, выравнивая их вверху таблиц

Question

У меня есть две таблицы рядом друг с другом, и проблема в том, что я хочу, чтобы обе таблицы отображались в ряд друг с другом, но я хочу, чтобы они были встроены в заголовки таблиц в ряд друг с другом.Он делает это в Internet Explorer и Opera, но не делает этого для Safari, Firefox и Google Chrome, так как в этих браузерах он отображает таблицы встроенными, но встроенными в нижней части таблицы, а не в верхней части таблицы.

Как я могу это сделать?

Код здесь в Jsfiddle.

Answer 1

Вы можете использовать свойство vertical-align, чтобы переместить таблицу в верхнюю часть блока. Измените CSS на это:

#optionAndAnswer
{
  display: inline-block;
  vertical-align: top;
}

Answer 2

Похоже, что это работает в последних версиях Firefox, Safari и Chrome, если я расширю представление «Результат» JSFiddle так, чтобы обе таблицы могли совмещаться рядом друг с другом.Если представление слишком узкое, оно оборачивает вторую таблицу под первой, что является правильным поведением по умолчанию.

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