title: How do I make <td> elements stay in place when the screen is zoomed in or out?
body: <pre><code>&lt;div&gt;
   &lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; class=&quot;standard-table standard-table-mini&quot; 
   summary=&quot;Object Table&quot; style=&quot;padding-left: 224px; padding-right: 50px;&quot;&gt;
    &lt;thead&gt;
     &lt;tr&gt;
      &lt;th align=&quot;center&quot; style=&quot;right-padding:10px;&quot;&gt;&lt;b&gt;Action&lt;/b&gt;&lt;/th&gt;
       &lt;th align=&quot;left&quot;&gt;&lt;b&gt;Components&lt;/b&gt;&lt;/th&gt;
     &lt;/tr&gt;
    &lt;/thead&gt;
  &lt;tbody&gt;
   &lt;tr class=&quot;even&quot;&gt;
    &lt;td align=&quot;left&quot; style=&quot;width: 550px;&gt;
     &lt;div class=&quot;field&quot;&gt;//some code here to enter radio button as input&lt;/div&gt;
    &lt;/td&gt;
  
    &lt;td align=&quot;center&quot;&gt;
     &lt;div class=&quot;field&quot;&gt;//some code here to populate components when radio button is selected&lt;/div&gt;
    &lt;/td&gt;
  
    &lt;td align=&quot;right&quot; style=&quot;display: block;&quot; id =&quot;somelabel&quot;&gt; //this is initially not displayed and will only be displayed when Radio button8 is selected
     &lt;input type=&quot;number&quot;&gt;//some code here to enter labels and input
    &lt;/td&gt;
  
   &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  <p>This is what it looks like at 100% zoomed in: <a href="https://i.stack.imgur.com/982Je.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/982Je.png" alt="enter image description here" /></a></p>
  <p>This is what it looks kike when the last radio button is selected at 100% zoomed in: <a href="https://i.stack.imgur.com/H3aeP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H3aeP.png" alt="enter image description here" /></a></p>
  <p>This is what I want it to look like (this is when its 67% zoomed out)<a href="https://i.stack.imgur.com/nllWk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nllWk.png" alt="enter image description here" /></a>
  And i want the middle and right <code>&lt;td&gt;</code> 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 <code>position</code> <code>width</code> or something like that. Very new to HTML/CSS.</p>