여러 개의 테이블이있는 div의 가로 스크롤 막대

Question

DIV 요소에 여러 개의 테이블이 있고 특정 너비의 가로 스크롤 막대를 제공하려고합니다. 복수의 테이블을 가지는 div에 수평 스크롤 바를주는 방법

<div style="float:left; max-width:300px; min-width:50px; overflow-x:auto!important; white-space:nowrap;"> 
<table width="200" border="1" cellpadding="0" cellspacing="0" style="float:left"> 
    <tr> 
    <td>test1</td> 
    <td>test1</td> 
    <td>test1</td> 
    </tr> 
    <tr> 
    <td>test1</td> 
    <td>test1</td> 
    <td>test1</td> 
    </tr> 
</table> 
<table width="200" border="1" cellpadding="0" cellspacing="0" style="float:left!important"> 
    <tr> 
    <td>test2</td> 
    <td>test2</td> 
    <td>test2</td> 
    </tr> 
    <tr> 
    <td>test2</td> 
    <td>test2</td> 
    <td>test2</td> 
    </tr> 
</table> 
</div> 

Answer 1

이것을 사용하려면 div에 div를 사용해주세요. 샘플 : http://jsbin.com/opohif/2/edit

희망이 도움이 되길 바랍니다.

Answer 2

하나의 대안이 있지만 직접적인 대안이 있으니 제안 해주세요.

<div style="float:left; max-width:300px; min-width:50px; overflow-x:auto!important; white-space:nowrap;"> 
<table border="1"> 
    <tr> 
     <td> 
      <table width="200" border="1" cellpadding="0" cellspacing="0" style="float:left"> 
       <tr> 
       <td>test1</td> 
       <td>test1</td> 
       <td>test1</td> 
       </tr> 
       <tr> 
       <td>test1</td> 
       <td>test1</td> 
       <td>test1</td> 
       </tr> 
      </table> 
     </td> 
     <td> 
      <table width="200" border="1" cellpadding="0" cellspacing="0" style="float:left!important"> 
       <tr> 
       <td>test2</td> 
       <td>test2</td> 
       <td>test2</td> 
       </tr> 
       <tr> 
       <td>test2</td> 
       <td>test2</td> 
       <td>test2</td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 
</div>