Вёрстка « Как сделать 2 таблицы + inline-block + 50% и всё в одну строку?

Как сделать 2 таблицы + inline-block + 50% и всё в одну строку. Не могу где тут подводный камень.

Суть задачи:
Разместить ДВЕ таблицы в один ряд, при этом их ширина 50% и имеют параметр inline-block.

Если делать невалидную верстку, то все работает.

В общем вот тут всё показано и расписано.

Подскажите что мешает таблицам встать в 1 ряд?

Обернуть еще одной таблицей не вариант.

UPD Забыл сказать, в комментариях к HTML коду показано в чем не валидность верстки

1 ответов



table:nth-of-type(2) {
  margin-left:-.3em
}
 

Вылазит при парсинге html кода лишний пробел, который и мешает встать инлайн-блокам в ряд.

А если в общем варианте (для горизонтального меню, например), то лучше так:


table:not(:first-of-type) {
  margin-left: -.3em
}