如何在HTML中設置<table>/​​樣式？

Question

我有一個帶有2行和2列的表格的HTML頁面。

我也已經選擇和選擇的結果，我想有一些方形紅色邊框（這是在我的代碼工作...）

我想修復四個方塊保持瀏覽器頁面的50％（寬度和高度......注意：在我的代碼中，我已經確定了高度，但我知道這不是正確的方式......），當您調整大小時瀏覽器窗口。

，現在當您選擇一個選項，獲得紅色邊框，但這種「爆發」，在寬度和頁面高度的50％......

我知道這是一些有關或樣式的設置，但我

注無法找到合適的解決方案

這是我的實際代碼：

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> 
 
     \t <!-- first row --> 
 
     \t <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

我想你正在尋找

table td { 
    width:50%; 
} 

https://jsfiddle.net/njppze1g/

這將迫使你的表列是50％，但是這不會採取佔你的邊界和邊界填充等的寬度 你得到了3個選項的位置：

1. 使用預處理器，並使用變量
2. 的JavaScript來計算的高度/寬度調整
3. 使用DIV解決方案，刪除表格（我不確定你爲什麼需要它們）。

[編輯]

基於Hastig Zusammenstellen的評論我改變了小提琴。它現在應該做你想要的。我從div中刪除了height/width屬性，並將它們放在css中，並使用了vw單位而不是％。

此外，快速的建議。我會用一個類來定義div的「選定」風格。如果您稍後決定更改邊框顏色或寬度或任何其他內容，則只需要在一次更改CSS中的代碼。隨着你目前的做法，你必須改變多個地方的代碼..