How to set <table> / <td> styles in HTML?

Question

I've an HTML page with a table with 2 rows and 2 columns.

I've also a selection and on the result of the selection I'd like to have a red border on some squares (this is working in my code ... )

I'd like to fix that the four squares maintain 50% of the browser page(in width and in height ... NOTE: in my code now I've fixed the height but I know that is not the right way ... ), also when you resizing the browser window.

Note that now when you select an option you obtain the red border but this "broke" the 50% in width and height of the page ...

I know that is something about or style setting but I can't find the right solution

This is my actual code:

   function onSelect(event) {
                  switch (this.options[this.selectedIndex].text) {
                     case "One":
                       var td = document.getElementById("one");
                       td.style.borderColor = "red";
                       td.style.borderWidth = "5px";
                       td.style.borderStyle = "solid";
                       td.style.width = "99%";
    
                       var td = document.getElementById("two");
                       td.style.borderColor = "black";
                       td.style.borderWidth = "1px";
                       td.style.borderStyle = "solid";
                       td.style.width = "100%";
    
                       break;
                     case "Two":
                       var td = document.getElementById("two");
                       td.style.borderColor = "red";
                       td.style.borderWidth = "5px";
                       td.style.borderStyle = "solid";
                       td.style.width = "99%";
    
                       var td = document.getElementById("one");
                       td.style.borderColor = "black";
                       td.style.borderWidth = "1px";
                       td.style.borderStyle = "solid";
                       td.style.width = "100%";
    
                       break;
                    }
              }

 
    
        <div id="titlebar">
          <center>
              Select option:
              <select onchange="onSelect.call(this, event)">
                <option value="one">One</option>
                <option value="two">Two</option>
              </select>
    
             <script>
           
            </script>
          </center>
        </div>
    
    
    
        <div id="images">
          <table width="100%" border=1 cellpadding=1>
      	   <!-- first row -->
      	   <tr id="row1">
             <td id="xxx">
               <div id="xxx_div" style="width:100%;height:370px"></div>
             </td>
             <td id="yyy">
               <div id="one" style="width:100%;height:370px"></div>
             </td>
           </tr>
           <!-- second row -->
           <tr id="row2">
             <td id="zzz">
               <div id="zzz_div" style="width:100%;height:370px"></div>
             </td>
             <td id="kkk">
               <div id="two" style="width:100%;height:370px"></div>
             </td>
           </tr>
          </table>
        </div>
    
        <div id="bottom">
          Bottom ...
        </div> 

Answer 1

I think you're looking for

table td {
    width:50%;
}

https://jsfiddle.net/njppze1g/

This will force your table columns to be 50% but this won't take in account the width of your border and border padding etc. You got 3 options here:

1. Use a preprocessor and use variables
2. JavaScript to calculate the height/width on resize
3. Use a DIV solution, drop the tables (I'm not sure why you need them here).

[EDIT]

Based on Hastig Zusammenstellen's comment I changed the fiddle. It should now do exactly what you want. I removed the height/width properties from the divs and placed them in the css and used the vw units instead of %.

Also, quick suggestion. I'd use a class to define the "selected" style of the div. If you later decide to change the border color or width or whatever, you just have to change the code in once place, the css. With the way you currently did it, you'd have to change the code on multiple places..