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>
      	   <!-- 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

我认为你正在寻找

table td {
    width:50%;
}

https://jsfiddle.net/njppze1g/

这将强制您的表格列为50％，但这不会考虑边框宽度和边框填充等。你有三个选择：

使用预处理器并使用变量
用于计算调整大小时的高度/宽度的JavaScript
使用DIV解决方案，放下表格（我不知道你为什么需要它们）。

[编辑]

基于Hastig Zusammenstellen的评论，我改变了小提琴。它现在应该完全符合你的要求。我从div中删除了高度/宽度属性并将它们放在css中并使用了vw单位而不是％。

另外，快速建议。我使用一个类来定义div的“选定”样式。如果您以后决定更改边框颜色或宽度或其他任何内容，则只需更改一次代码即css即可。按照目前的方式，你必须在多个地方更改代码..

如何在HTML中设置/ <table> <tbody> <tr> <td>样式？

1 个答案: