2012-11-13 3 views
0

그래서 여기에 혼란스러운 문제가 있습니다. 나는 HTML과 JQuery Mobile로 테이블을 만들고있다. 그러나 요소는 겹치지 만 콘텐츠에는 UI CSS가 적용되지 않습니다. 뭔가 명확한 것을 놓치고 있습니까? 아니면 JQuery Mobile Library에 익숙하지 않은 것이 있습니까?테이블 요소 겹침

<table><tr><td><input type="radio"/></td><td>Less than $25,000</td></tr> 
    <tr><td><input type="radio"></td><td>$25,000 - $49,999</td></tr> 
    <tr><td><input type="radio"></td><td>$50,000 - $74,999</td></tr> 
    <tr><td><input type="radio"></td><td>$75,000 - $100,000</td></tr> 
    <tr><td><input type="radio"></td><td>More than $100,000</td></tr> 
    <tr><td><input type="radio"></td><td>I am not required to share this information</td></tr> 
</table></form> 

Here is the code and image of what's going on.

+3

에 근무하고있다 고 말했다 사고. 당신이 보여준 것이 잘 생겼습니다. 더 자세하게 얘기해 주 시겠어요? – Brad

+0

화면의 맨 위에는 무슨 일이 일어나는지 보여줍니다. 전에 만난 사람이 있습니까? – Eman

+1

나는 그것을 지금 본다. 라디오 버튼을 그대로 보는 것은 어렵습니다. 혼란스러워하는 분은 다음 사이트에서 전체 크기 이미지를보십시오 : http://i.stack.imgur.com/43T6O.png @Eman, jsfiddle에서 이것을 복제하거나 CSS를 조정할 수있는 링크를 제공 할 수 있습니까? – Brad

답변

1

먼저 당신이 발행 : JQM이 제대로

HTML

를 표시 할

라디오 옵션이 마크 업이 필요합니다

<fieldset data-role="controlgroup" data-mini="true"> 
     <input type="radio" name="radio-mini" id="radio-mini-1" value="choice-1" checked="checked" /> 
     <label for="radio-mini-1">Credit</label> 

    <input type="radio" name="radio-mini" id="radio-mini-2" value="choice-2" /> 
     <label for="radio-mini-2">Debit</label> 

     <input type="radio" name="radio-mini" id="radio-mini-3" value="choice-3" /> 
     <label for="radio-mini-3">Cash</label> 
</fieldset> 

테이블 태그를 사용하여 화면에 요소를 배치하거나 표시하는 중입니다. tablature 데이터에 사용되는 것처럼이 작업을 수행하지 않을 것을 제안합니다. JQM에서

<div data-role="page" class="type-home"> 

    <div data-role="content"> 
     <fieldset data-role="controlgroup"> 
    <legend>Annual Salary:</legend> 
     <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" /> 
     <label for="radio-choice-1">Less tahn $24,999</label> 

     <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" /> 
     <label for="radio-choice-2">$25,000 - $49,999</label> 

     <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" /> 
     <label for="radio-choice-3">$50,000 - $74,999</label> 

     <input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" /> 
     <label for="radio-choice-4">$75,000 - $99,999</label> 

      <input type="radio" name="radio-choice" id="radio-choice-5" value="choice-5" /> 
     <label for="radio-choice-5">More than $100,000</label> 

      <input type="radio" name="radio-choice" id="radio-choice-6" value="choice-6" /> 
     <label for="radio-choice-6">I am not required to share this information 
</label> 
</fieldset> 
    </div> 
</div>​ 

잘 테이블이 아주 잘 (아직) 문서화되어 있지 않습니다

HTML 그러나 당신이 찾을 수 있습니다 나는 이것이 당신이 찾고있는 무슨 생각 표시에 필요한 몇 가지 추가 속성입니다.

(크롬보기)

  • 보기 소스 : HTTP : //jquerymobile.com/demos/1.2.0/docs/content/content-html. HTML

HTML :

<table summary="This table lists all the JetBlue flights."> 
    <caption>Travel Itinerary</caption> 
    <thead> 
     <tr> 
      <th scope="col">Flight:</th> 
      <th scope="col">From:</th> 
      <th scope="col">To:</th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr> 
      <td colspan="5">Total: 3 flights</td> 
     </tr> 
    </tfoot> 
    <tbody> 
     <tr> 
      <th scope="row">JetBlue 983</th> 
      <td>Boston (BOS)</td> 
      <td>New York (JFK)</td> 
     </tr> 
     <tr> 
      <th scope="row">JetBlue 354</th> 
      <td>San Francisco (SFO)</td> 
      <td>Los Angeles (LAX)</td> 
     </tr> 
     <tr> 
      <th scope="row">JetBlue 465</th> 
      <td>New York (JFK)</td> 
      <td>Portland (PDX)</td> 
     </tr> 
    </tbody> 
</table> 
그 존재와

당신이 무엇인지에 필요한 코드 또는 스크린 샷을 게시하지 않은 표에 대한 몇 가지 노력, 우리는 당신을 도울 수