jQuery Mobile 테이블 리플 로우 - 표가 수평으로 표시되지 않습니다.

Question

JQuery Mobile Reflow에서 두 개의 열만있는 경우에도 여전히 수직 순서로 표시됩니다.

수평 테이블에 어떻게 멋지게 표시 할 수 있습니까?

http://jsfiddle.net/fsloke/w3tLc6fs/

<div> 
    <center> 
    <table data-role="table" class="ui-responsive" id="result"> 
     <thead> 
     <tr> 
      <th>A</th> 
      <th>C</th> 
     </tr> 
     </thead> 
     <tbody> 
    <tr> 
     <td style="text-align:right;">1</td>  
     <td style="text-align:right;">1</td> 
    </tr> 
    <tr> 
     <td style="text-align:right;">2</td>  
     <td style="text-align:right;">2</td> 
    </tr> 
    <tr> 
     <td style="text-align:right;"><b>3</b></td> 
     <td style="text-align:right;"><b>3</b></td> 
    </tr> 
    </tbody> 
    </table> 
    </center> 
</div> 

Answer 1

여기에 jQuery를 모바일 문서 읽기 : Table: Reflow

이 [표 반응하게는]에서 몇 가지 간단한 CSS 규칙과 미디어 쿼리를 포장하여 수행됩니다 만 특정 폭의 중단 점 위에 규칙을 적용합니다. 스타일은 표 머리글 행을 표시하고 셀을 표 형식으로 표시하며 생성 된 레이블 요소를 각각 숨 깁니다.

가 40em (640) 아래에있는 폭 리플 로우 할 것입니다 테이블에 ui-responsive 클래스를 포함하여 : 그래서, 여기에 40em에서 프레젠테이션을 바꿉니다 예를 들어 미디어 쿼리 (640 픽셀)입니다.

동일한 페이지에 자신 만의 스타일을 만드는 해결책이 있습니다.

@media (min-width: 10em) { 
    /* Show the table header rows and set all cells to display: table-cell */ 
    .my-custom-breakpoint td, 
    .my-custom-breakpoint th, 
    .my-custom-breakpoint tbody th, 
    .my-custom-breakpoint tbody td, 
    .my-custom-breakpoint thead td, 
    .my-custom-breakpoint thead th { 
     display: table-cell; 
     margin: 0; 
    } 
    /* Hide the labels in each cell */ 
    .my-custom-breakpoint td .ui-table-cell-label, 
    .my-custom-breakpoint th .ui-table-cell-label { 
     display: none; 
    } 
} 

은 다음 테이블에 스타일을 적용 : 테이블과 10em 화면에서 리플 로우 할 것

<table data-role="table" class="my-custom-breakpoint" id="result"> 
... 
</table> 

(180px). 물론 이것을 조정해야합니다.

FIDDLE