改行のない2つのインラインテーブル

Question

2つのテーブルを視覚的に結合しなければならないビューがあります。最初のテーブルには1行、Secondには複数の行があります。問題は、最初のテーブル（幅：〜3000px、すべてのtds）の改行を表示した後で、2行目が改行で表示され、インラインでは表示されないことです。

私のコードは次のようになります。

<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>