JqueryMobile 2 열 테이블 추가

Question

jquerymobile을 사용하여 2 개의 열이있는 반응 형 테이블을 추가하고 싶습니다.

! 열은 왼쪽에 정렬되고 다른 하나는 오른쪽에 정렬되어야합니다. 그 결과 2 개의 열이 다른 열 아래에 1 개 표시되고 이는 내가 원하지 않는 것입니다.

모바일 용 반응 형 테이블을 사용하여 2 열 테이블을 표시하려면 어떻게해야합니까? 왼쪽 테이블은 왼쪽에 표시되고 오른쪽 테이블은 오른쪽 테이블에 표시됩니다. 다른 하나.

<div data-role="main" class="ui-content"> 
<table style="width:100%" data-role="table" class="ui-responsive"> 
    <thead> 
    <tr> 
     <th data-priority="1" style="text-align:left"></th> 
     <th data-priority="1" style="text-align:right"></th> 

    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td style="text-align:left">1</td> 
     <td style="text-align:right">Alfreds Futterkiste</td> 

    </tr> 

    </tbody> 
</table> 

Answer 1

는 그냥 데이터 역할 = 테이블 삭제합니다 (wepapp가 JQM을 사용) : 여기

것은 DEMO

<table id="MyTable" class="ui-responsive table-stroke"> 
    <thead> 
     <tr> 
      <th class="left">Col 1</th> 
      <th class="right">Col 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="left">Row 1 Col 1</td> 
      <td class="right">Row 1 Col 2</td> 
     </tr> 
     <tr> 
      <td class="left">Row 2 Col 1</td> 
      <td class="right">Row 2 Col 2</td> 
     </tr> 
     <tr> 
      <td class="left">Row 3 Col 1</td> 
      <td class="right">Row 3 Col 2</td> 
     </tr> 
     <tr> 
      <td class="left">Row 4 Col 1</td> 
      <td class="right">Row 4 Col 2</td> 
     </tr>     
    </tbody> 
</table> 

#MyTable { 
    width: 100%; 
} 
#MyTable .left { 
    text-align: left; 
} 
#MyTable .right { 
    text-align: right; 
}