Две встроенные таблицы без разрыва строки

Question

У меня есть представление, где две таблицы должны быть визуально объединены в одном. Первая таблица имеет 1 строку, вторая - несколько строк. Проблема заключается в том, что после отображения строк первой таблицы (ширина: ~ 3000 пикселей, со всеми tds) разрывы строк, а вторая отображается на новой строке, а не в строке.

Мой код выглядит следующим образом:

<div style="display:inline-block;"> 
    <table> 
     <tr> 
     //a lot of td 
     </tr> 
    </table> 
    </div> 

    <div style="display:inline-block;"> 
    <table> 
     <tr> 
      <td></td><td></td><td></td> 
     </tr> 
     <tr> 
      <td></td><td></td><td></td> 
     </tr> 
     //and so on 
    </table> 
    </div> 

Answer 1

См код и комментарии ниже.

section { 
 
    font-size: 0; /* avoid whitespace between inline-block children */ 
 
    white-space: nowrap; /* prevent wrapping to new line */ 
 
} 
 
section div { 
 
    display: inline-block; 
 
    font-size: 16px; /* re-set font-size here to whatever you need */ 
 
}

<section> 
 
    <div> 
 
    <table> 
 
     <tr> 
 
     <td><img src="http://placekitten.com/3000/200" /></td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 

 
    <div> 
 
    <table> 
 
     <tr> 
 
     <td>Row 1</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Row 2</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</section>