css - I am not able to align my html control to right in html table -


my requirement want align radio button left in table cell, not happening below code:

my code

<div data-role="collapsible" data-theme="b" data-content-theme="b">     <h3>action</h3>     <table class="tabledata" width="100%">         <tr>             <td class="td1">                 <p>                     <input id="radio1" type="radio" value="approve" /></p>             </td>             <td class="td2">approve</td>         </tr>         <tr>             <td>                 <input id="radio2" type="radio" /></td>             <td class="td2">reject</td>         </tr>         <tr>             <td>                 <input id="radio3" type="radio" />             </td>             <td class="td2">send requestor</td>         </tr>         <tr>             <td>amount approved domestic sector : </td>             <td>                 <input id="text1" type="text" /></td>         </tr>         <tr>             <td>remarks : </td>             <td>                 <input id="text2" type="text" /></td>         </tr>         <tr>             <td class="tabledata">                 <input id="button1" type="button" value="submit" />             </td>         </tr>     </table> </div> 

my css classes:

.td1 {     vertical-align:middle;     text-align:right; }  .td2 {     text-align: left; } 

actually want keep radio button , corresponding text in table row combining 2 columns , centre aligned , submit button shoud centre aligned in table row since using jquery mobile datarole guess not happening.please me look.

after adding script in head getting below output:

enter image description here

remove ui-radio class each radio button.

$('[type=radio]').each(function () {  $(this).closest('div').removeclass('ui-radio'); }); 

and add class td1 each radio button.

<tr>  <td class="td1">   <input id="radio1" type="radio" value="approve" />  </td>  <td class="td2">approve</td> </tr> <tr>  <td class="td1">   <input id="radio2" type="radio" />  </td>  <td class="td2">reject</td> </tr> <tr>  <td class="td1">   <input id="radio3" type="radio" />  </td>  <td class="td2">send requestor</td> </tr> 

demo


alternative method: no jquery code required nor custom css styles. read more here.

why don't use styled radio buttons, in below demo.

alternative


Comments

Popular posts from this blog

node.js - Bad Request - node js ajax post -

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -