javascript - 当列不再隐藏时，表格样式混乱

Question

对于我的网站，我有一个在 pc/笔记本电脑视图中看起来不错的表格设置，但我正在努力改进它在移动/平板电脑视图中的外观。因此，为此我创建了一个下拉框，以便用户可以决定他们想要在移动视图中查看哪一列的信息。在移动视图中仅显示一列。这似乎工作正常，但是当使用开发人员工具测试它然后返回正常视图时，所有列的列都以一种奇怪的方式设置样式。

我有一些图片来说明我的意思。

对于 pc/笔记本电脑视图，它就像：

在移动设备中它可能是这样的（注意，我在 css 上还有一些工作要做）：

现在，当我使用开发人员工具并返回到笔记本电脑视图时，所有列都可用，由于某种原因，表格现在显示如下：

表格的 html 是这样的：

<div id ='sizes'>
    <p>Select size you want to know more about</p>
    <select id="sizeOption" required name="sizeOption" class="sizeOption" onchange="showSize()" style="width:200px;">
    <option value="per-pack" selected="selected">Per Pack</option>
    <option value="per-100g" >Per 100g</option>
    <option value="single" >Per Buttery</option>
    </select>

</div>

  <table width="50%" border="0" cellspacing="0" cellpadding="0">

    <tr>

    <th></th>

    <th class='per-pack'>Per 4 Pack(200G)</th>

    <th class='per-100g'>Per 100g</th>

    <th class='single'>Per Buttery(50G)</th>

    </tr>

    <tr>

      <th>Calories</th>

      <td class='per-pack'>724</td>

      <td class='per-100g'>362</td>

      <td class='single'>181</td>

     </tr>

     <tr class="even">

      <th>Fat</th>

      <td class='per-pack'>43.1g</td>

      <td class='per-100g'>21.6g</td>

      <td class='single'>10.8g</td>

     </tr>

    <tr>

      <th>Saturated</th>

      <td class='per-pack'>15.7g</td>

      <td class='per-100g'>7.9g</td>

      <td class='single'>3.9g</td>

     </tr>

    <tr class="even">

      <th>Sodium</th>

      <td class='per-pack'>1,941.9mg</td>

      <td class='per-100g'>971mg</td>

      <td class='single'>485.5mg</td>

     </tr>

    <tr>

      <th>Carbohydrates</th>

      <td class='per-pack'>78.6g</td>

      <td class='per-100g'>39.3g</td>

      <td class='single'>19.7g</td>

     </tr>

    <tr class="even">

      <th>Fiber</th>

      <td class='per-pack'>0g</td>

      <td class='per-100g'>0g</td>

      <td class='single'>0g</td>

     </tr>

    <tr>

      <th>Sugar</th>

      <td class='per-pack'>10.9g</td>

      <td class='per-100g'>5.5g</td>

      <td class='single'>2.7g</td>

     </tr>

    <tr class="even">

      <th>Protein</th>

      <td class='per-pack'>10.5g</td>

      <td class='per-100g'>5.3g</td>

      <td class='single'>2.6g</td>

     </tr>


</table>

CSS是：

table {
  width: 600px;
}

th,
td {
  padding: 7px 10px 10px 10px;
}

th {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 90%;
  bottom-border: 2px solid #111111;
  border-top: 1px solid #999;
  text-align: left;
}

tr.even {
  background-color: #efefef;
}

tr:hover {
  background-color: #c3e6e5;
}

在移动视图中涉及的js是：

function showSize() {

let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
   let per_pack = document.getElementsByClassName('per-pack');
   let per_100g = document.getElementsByClassName('per-100g');
   let single = document.getElementsByClassName('single');
   
   let size = document.getElementById("sizeOption").value;

  if(isMobile) {
 
    if (size === 'per-pack') {

    for (i = 0; i < per_pack.length; i++) {
    per_pack[i].style.display = "block";
  }
  
  for (i = 0; i < per_100g.length; i++) {
    per_100g[i].style.display = "none";
  }
  
    for (i = 0; i < single.length; i++) {
    single[i].style.display = "none";
  }
  
    } else if (size === 'per-100g') {
    
    for (i = 0; i < per_pack.length; i++) {
    per_pack[i].style.display = "none";
  }
  
  for (i = 0; i < per_100g.length; i++) {
    per_100g[i].style.display = "block";
  }
  
    for (i = 0; i < single.length; i++) {
    single[i].style.display = "none";
  }
    } else if(size === 'single') {
    
    for (i = 0; i < per_pack.length; i++) {
    per_pack[i].style.display = "none";
  }
  
  for (i = 0; i < per_100g.length; i++) {
    per_100g[i].style.display = "none";
  }
  
    for (i = 0; i < single.length; i++) {
    single[i].style.display = "block";
  }
    }
    
  } 
    
}

function sizeDisplay() {
let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

    if (!isMobile) {
        document.getElementById('sizes').style.display = 'none';
        
    } else {
    tabcontent = document.getElementsByClassName("tabcontent");

        for (i = 0; i < tabcontent.length; i++) {

        if (tabcontent[i].style.display !== '' || undefined) {
            document.getElementById('sizes').style.display = 'block';
        }
    }

  }
  
     showSize();

}

在我的身体标签中，我还有：

<body onload='showSize()' onresize='sizeDisplay()'>

我不确定为什么这些列以奇怪的方式显示？有人能帮忙吗？还有比执行多个 for 循环更好的方法来执行我的 showSize 函数吗？

谢谢

标签： javascripthtmlcss