title: how to fix column position in <table> when <input> in <td> in a <tr> row are being toggled to hide/display with none/block
body: <p>My number of columns in my 2x2 table expand or contract based on the value chosen in the select, 1 or 2. Currently, as the columns increase or decrease, the column position(s) on the screen shift wildly about. How can I fix the column on the screen no matter how many columns appear in a row?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction() {
    var x = document.getElementById("mySelect").value;
    var tbl = document.getElementById("myTable");
    var row = tbl.getElementsByTagName("tr");
  
    switch (x) {
      case "1":
        for (var i = 0; i &lt; row.length; i++) {
          var tds = row[i].getElementsByTagName("input");
          for (var j = 0; j &lt; tds.length; j++) {
            if (j == 0) {
              tds[j].style.display = "block";
            } else {
              tds[j].style.display = "none";
            }
          }
        }
        break;
      case "2":
        for (var i = 0; i &lt; row.length; i++) {
          var tds = row[i].getElementsByTagName("input");
          for (var j = 0; j &lt; tds.length; j++) {
            if (j &lt; 2) {
              tds[j].style.display = "block";
            } else {
              tds[j].style.display = "none";
            }
          }
        }
        break;
      default:
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select id="mySelect" onchange="myFunction()"&gt;
    &lt;option value="Select"&gt;Select One&lt;/option&gt;
    &lt;option value="1"&gt;1&lt;/option&gt;
    &lt;option value="2"&gt;2&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;TABLE id="myTable" style="border-spacing: 25px 10px; width:75%" cellspacing="0"&gt;
    &lt;TR&gt;
      &lt;TD class="column1" align="left"&gt;
        &lt;div&gt;
          &lt;input value="0"&gt;&lt;/input&gt;
        &lt;/div&gt;
      &lt;/TD&gt;
      &lt;TD class="column2" align="left"&gt;
        &lt;div&gt;
          &lt;input value="0"&gt;&lt;/input&gt;
        &lt;/div&gt;
      &lt;/TD&gt;
    &lt;/TR&gt;
    &lt;TR&gt;
      &lt;TD class="column1" align="left"&gt;
        &lt;div&gt;
          &lt;input value="0"&gt;&lt;/input&gt;
        &lt;/div&gt;
      &lt;/TD&gt;
      &lt;TD class="column2" align="left"&gt;
        &lt;div&gt;
          &lt;input value="0"&gt;&lt;/input&gt;
        &lt;/div&gt;
      &lt;/TD&gt;
    &lt;/TR&gt;
  &lt;/TABLE&gt;</code></pre>
  </div>
  </div>
  </p>