jQuery Mobile을 사용한 테이블 렌더링 문제

jQuery Mobile을 처음 사용하여 jQuery Mobile 문서 here에서 실증 된 것처럼 왼쪽 열에 헤더가 있고 오른쪽 열에 데이터가있는 테이블을 렌더링하려고합니다. 여기jQuery Mobile을 사용한 테이블 렌더링 문제

<div data-role="page" id="home"> 
<div data-role="header" data-theme="b"> 
    <h1>Header</h1> 
</div> 
<div data-role="content"> 
    <ul class="subheader" data-role="listview" data-divider-theme="d" data-inset="false"> 
    <li data-role="list-divider" role="heading">Section</li> 
    </ul> 
    <table data-role="table" data-mode="reflow"> 
    <thead> 
    <tr> 
    <th>Head 1</th> 
    <th>Head 2</th> 
    <th>Head 3</th> 
    <th>Head 4</th> 
    <th>Head 5</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
    <td>Data 1</td> 
    <td>Data 2</td> 
    <td>Data 3</td> 
    <td>Data 4</td> 
    <td>Data 5</td> 
    </tr> 
    </tbody> 
    </table> 
</div> 
</div>

내 바탕 화면 (파이어 폭스, 맥 OS X)에 렌더링됩니다으로의 - 내가 원하는대로 :

여기 내 테스트 코드의

그리고 여기가 렌더링 된 것 같은입니다 내 휴대 기기 (PhoneGap, Samsung Galaxy S2) :

어쨌든, 어떻게됩니까? 첫 번째 열에서 <th>을 렌더링하고 두 번째 열에서 <td>을 렌더링하지 않겠습니까? 왜 그렇게되지 않았습니까? 그것을 성취하기 위해 내가 바꿔야 할 것은 무엇입니까? 미리 감사드립니다.

출처

2013-04-13 Paulo Freitas

'data-mode = "reflow"'를 사용하거나 브레이크 포인트 응답 CSS 스타일을 사용하십시오. http://view.jquerymobile.com/1.3.1/dist/demos/widgets/table-reflow/ – Omar

Ermm,'data-mode = "reflow"를 제거해도 아무 것도 변경되지 않았습니다 ... 내 뷰포트 설정이 잘못되었습니다. , 그러나 그것들을 고치는 것조차 나는 리플 로우 테이블을 얻지 못했다. 필자가 반응하는 브레이크 포인트에서 사용하는 '최소 너비'값에 상관없이 항상 테이블 형식이다. : / –

발견 : 문서에 HTML5 문서 유형이 누락되었습니다. Doctype이 없으면 테이블은 PhoneGap의 임베디드 브라우저에서 리플 로우 스타일을 얻지 못했습니다.

출처

2013-04-17 20:02:53

jQuery Mobile을 사용한 테이블 렌더링 문제

답변

관련 문제