当屏幕放大或缩小时，如何使元素保持原位？

Question

<div>
 <table cellpadding="0" cellspacing="0" border="0" class="standard-table standard-table-mini" 
 summary="Object Table" style="padding-left: 224px; padding-right: 50px;">
  <thead>
   <tr>
    <th align="center" style="right-padding:10px;"><b>Action</b></th>
     <th align="left"><b>Components</b></th>
   </tr>
  </thead>
<tbody>
 <tr class="even">
  <td align="left" style="width: 550px;>
   <div class="field">//some code here to enter radio button as input</div>
  </td>

  <td align="center">
   <div class="field">//some code here to populate components when radio button is selected</div>
  </td>

  <td align="right" style="display: block;" id ="somelabel"> //this is initially not displayed and will only be displayed when Radio button8 is selected
   <input type="number">//some code here to enter labels and input
  </td>

 </tr>
</tbody>
</table>
</div>

This is what it looks like at 100% zoomed in:

This is what it looks kike when the last radio button is selected at 100% zoomed in:

This is what I want it to look like (this is when its 67% zoomed out) And i want the middle and right <td> element to stay in its place even when I zoom in and out. I am not allowed to change the implementation to css flexbox so, it will be great if I can work something with position width or something like that. Very new to HTML/CSS.

Answer 1

May bee td align="left" style="width: 60%"? or td align="center" position: absolute; top: 20%; left: 60%; and position: relative should not be at the parent

Answer 2

this one is fixed to the left component

 <div> <table cellpadding="0" cellspacing="0" border="0" class="standard-table standard-table-mini" summary="Object Table" style="padding-left: 224px; padding-right: 50px;"> <thead> <tr> <th align="center" style="right-padding:10px;"><b>Action</b></th> <th align="left"><b>Components</b></th> </tr> </thead> <tbody> <tr class="even"> <td align="left" style="width: 60%"> <div class="field">//some code here to enter radio button as input</div> </td> <td align="center"> <div class="field">//some code here to populate components when radio button is selected</div> </td> <td align="right" style="display: block;" id ="somelabel"> //this is initially not displayed and will only be displayed when Radio button8 is selected <input type="number">//some code here to enter labels and input </td> </tr> </tbody> </table> </div>

but this one is fixed to the window

 <div> <table cellpadding="0" cellspacing="0" border="0" class="standard-table standard-table-mini" summary="Object Table" style="padding-left: 224px; padding-right: 50px;"> <thead> <tr> <th align="center" style="right-padding:10px;"><b>Action</b></th> <th align="left"><b>Components</b></th> </tr> </thead> <tbody> <tr class="even"> <td align="left" style="width: 550px"> <div class="field">//some code here to enter radio button as input</div> </td> <td align="center" style="position: absolute; left: 60%; top: 20%"> <div class="field">//some code here to populate components when radio button is selected</div> </td> <td align="right" style="display: block; position: absolute; left: 80%; top: 20%" id ="somelabel"> //this is initially not displayed and will only be displayed when Radio button8 is selected <input type="number">//some code here to enter labels and input </td> </tr> </tbody> </table> </div>