줄 바꿈이없는 두 개의 인라인 테이블

Question

두 테이블을 시각적으로 하나로 결합해야하는보기가 있습니다. 첫 번째 테이블에는 1 행이 있고, 두 번째 테이블에는 여러 행이 있습니다. 문제는 첫 번째 표 (너비 : ~ 3000px, 모든 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>