表格元素重疊

Question

所以我在這裏有一個令人困惑的問題。我正在用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> 

Answer 1

首先發出：

收音機選項需要有這個標記爲JQM才能正確顯示

• http://jquerymobile.com/demos/1.2.0/docs/forms/radiobuttons/

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> 

現在（我認爲）您正在使用表標籤來佈局或顯示屏幕上的元素。我建議不要這樣做，因爲它用於製表數據。我認爲這是你在找什麼：在JQM

• http://jsfiddle.net/Lctam/1/

HTML

<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>​ 

而且也表不是很好的記錄（還），但你可以發現有是顯示所需的一些附加屬性。

• http://jquerymobile.com/demos/1.2.0/docs/content/content-html.html

（Chrome中視圖）

• 視圖-出處：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> 

有了這樣說，目前有一些表上的努力

• http://jquerymobile.com/branches/tables/docs/tables/index.html