Move table columns from one row into another

Question

I am working with software that automatically generates a form after you select your options, so the code is automatically generated and I cannot directly edit it. The code it outputs for this form is in tables. I would like the Amount, the radio buttons and their labels to all appear in one line however? Because I cannot edit the code directly, is there a way to do this w js? Possibly moving all of the columns into one row? Here is the link to a jsfiddle to the basic code it outputs: https://jsfiddle.net/jelane20/Lt36fq6f/1/

    <table class="form">
 <tbody id="panel">
  <tr>
   <td id="field">
    <label id="amount">Amount</label>
   </td>
   <td class="fieldsRight">
    <table id="options">
     <tbody>
      <tr>
       <td class="controlcell">
        <span class="top" item index="51" amount="25.00" >
         <input id="ad_51_6" type="radio">
          <label for="ad_51_6"> </label>
        </span>
       </td>
       <td class="fieldRight">
        <span>$25.00</span>
       </td>
      </tr>
      <tr>
       <td class="controlcell">
        <span class="top" item index="52" amount="50.00">
         <input id="ad_52_6" type="radio">
          <label for="ad_52_6"> </label>
        </span>
       </td>
       <td class="fieldRight">
        <span>$50.00</span>
       </td>
      </tr>
    </tbody>
  </table>
<tbody>
   </td>
  </tr>
 </tbody>
</table>

Thank you so much for your help!

Answer 1

You may add to your css the following rule:

#options tr {
    display: inline-table;
}

If you want to achieve the same result with jQuery you can write:

$('#options tr').css('display', 'inline-table');

Instead, if you need to move the sub table content to the upper table you can:

$('#options tr td').each(function(i, e) {
   $(this).appendTo('table.form tr:first');
});

The snippet (css solution):

 #options tr { display: inline-table; } 

 <table class="form"> <tbody id="panel"> <tr> <td id="field"> <label id="amount">Amount</label> </td> <td class="fieldsRight"> <table id="options"> <tbody> <tr> <td class="controlcell"> <span class="top" item index="51" amount="25.00"> <input id="ad_51_6" type="radio"> <label for="ad_51_6"> </label> </span> </td> <td class="fieldRight" > <span>$25.00</span> </td> </tr> <tr> <td class="controlcell"> <span class="top" item index="52" amount="50.00"> <input id="ad_52_6" type="radio"> <label for="ad_52_6"> </label> </span> </td> <td class="fieldRight"> <span>$50.00</span> </td> </tr> </tbody> </table> <tbody> </td> </tr> </tbody> </table> 

The snippet (jQuery solution):

 $('#options tr td').each(function(i, e) { $(this).appendTo('table.form tr:first'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="form"> <tbody id="panel"> <tr> <td id="field"> <label id="amount">Amount</label> </td> <td class="fieldsRight"> <table id="options"> <tbody> <tr> <td class="controlcell"> <span class="top" item index="51" amount="25.00"> <input id="ad_51_6" type="radio"> <label for="ad_51_6"> </label> </span> </td> <td class="fieldRight"> <span>$25.00</span> </td> </tr> <tr> <td class="controlcell"> <span class="top" item index="52" amount="50.00"> <input id="ad_52_6" type="radio"> <label for="ad_52_6"> </label> </span> </td> <td class="fieldRight"> <span>$50.00</span> </td> </tr> </tbody> </table> <tbody> </td> </tr> </tbody> </table>