여러 개의 테이블을 스크롤하여 한 줄에 표시

Question

페이지에 동적으로 테이블을 만들 때 각 테이블의 행 또한 동적입니다. 나는 줄 바꿈 대신에 오버플로가 있으면 그것들을 모두 한 줄에 표시하고 가로로 스크롤하려고합니다. 인라인 및 오버플로 스크롤을 설정했습니다.

.tableDiv {width:100%; overflow:scroll; display:inline} 

하지만 여전히 랩핑 중입니다. 이 문제에 대한 도움이 있으면 대단히 감사하겠습니다! http://jsfiddle.net/xAxfr/

Answer 1

http://jsfiddle.net/xAxfr/1/

. div 대신에 다른 테이블의 테이블을 다음에 만들면 같은 효과를 내고자하는만큼 넓은 행을 만들 수 있습니다.

ex.

<table class="tableContainer"> 
    <tr> 
    <td> 
    <table class="table"> 
     <tr> 
      <th colspan="2"> 
       Table One 
      </th> 
     </tr> 
     <tr> 
      <td> 
       two 
      </td> 
      <td> 
       three 
      </td> 
     </tr> 
     <tr> 
      <td> 
       four 
      </td> 
      <td> 
       five 
      </td> 
     </tr> 
    </table></td> 
    <td> 
    <table class="table"> 
     <tr> 
      <th colspan="2"> 
       Table Two 
      </th> 
     </tr> 
     <tr> 
      <td> 
       two 
      </td> 
      <td> 
       three 
      </td> 
     </tr> 
     <tr> 
      <td> 
       four 
      </td> 
      <td> 
       five 
      </td> 
     </tr> 
    </table></td> 

Answer 2

이 .table에 float: left를 제거하고 .tableDiv에 white-space: nowrap를 추가 : 여기

는 jsfiddle입니다. http://jsfiddle.net/xAxfr/2/

.tableDiv { 
    width:100%; 
    overflow:auto; 
    white-space:nowrap; 
} 

.table { 
    border-collapse:collapse; 
    border-spacing:0; 
    display:inline-block; 
} 

white-space:nowrap; 및

Answer 3

내가 here를 설명한대로 "테이블 방법"을 사용할 수 있다고 생각 display:inline-block;