Question

So I’ve got a confusing issue here. I am creating a table with HTML and JQuery Mobile. It’s elements keep overlapping however and the content does not have the UI CSS applied to it. Am I missing something obvious or is there something to the JQuery Mobile Library I am unfamiliar with?

<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

First you issue:

Radio options need to have this markup for jQM to display correctly

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

Now ( I think ) you’re using the table tag to layout or display elements on the screen. I would suggest not doing this as it’s used for tablature data. I think this is what you’re looking for:

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

And well Tables are not very well documented ( yet ) in jQM but you can find there is some additional attributes needed for displaying.

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

( View in Chrome )

• view-source: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>

With that being said there are some efforts for table being worked on

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