Javascript 媒体查询-动态内容宽度更改时更改CSS

我使用的是语义ui，在选项卡段中有如下网格设置：

<div class="ui bottom attached tab segment" data-tab="Overall Stats">

<div class="ui internally celled stackable grid">
  <div class="row">
    <div class="eight wide column">
      <h4 class="ui blue header">Top Goal Scorers
        <div class="sub header">(All Age Groups)</div>
      </h4>
      <div id="showOverallGB"></div>
    </div>


    <div class="eight wide column">
      <h4 class="ui blue header">Most MoM Awards
        <div class="sub header">(All Age Groups)</div>
      </h4>
      <div id="showOverallMoM"></div>
    </div>

  </div>
</div>

最佳射手
（所有年龄组）
大多数妈妈奖
（所有年龄组）

在

showtoletal*

divs中，我添加了动态创建的表。我遇到的问题是，创建的表可能比它们所在的列宽，这意味着左手表与右手表重叠（在非移动设备上查看时，网格不会堆叠）。如果动态添加的表比它们所在的列宽，是否有方法调用网格的可堆叠部分

编辑：这是一把小提琴- 您需要转到

年龄组统计

选项卡，然后处理JSFIDLE边界。您应该看到如下内容：

---

您可以将滚动条添加到表格中，这样它们就不会重叠添加：

#showGB, #showMoM {width:100%; overflow:auto;}

正如您在这里看到的：

或者，如果您想在没有可用空间的情况下将其中一个移动到另一个之后，请使用以下工具移除容器宽度的50%：

.ui.grid > .row > [class*="eight wide"].column {width:auto !Important}

---

正如您在这里看到的：

共享一把小提琴。@Geoman Yabes-您确定吗？我检查了一下，没有发现任何丢失的标签。此外，表格应在较大屏幕上水平对齐。但问题是：在某些屏幕尺寸上，表格重叠，因为屏幕不够宽，但屏幕足够宽，足以阻止媒体查询，从而使网格可堆叠。是的，对不起。删除我的comment@DeepakYadav您需要在此处显示显示问题的标记/代码，而不是明天可能更改或消失的第三方网站。有人能解释否决投票的原因吗？我很好奇我做错了什么。谢谢。我更喜欢第二种解决方案。你能再解释一下它在做什么吗？我想它只是将宽度设置为自动，对吗？但是我不明白为什么CSS在默认情况下没有，CSS的宽度在任何块元素上默认为100%。问题在于你的

语义
css。是不是有人把它加上了固定的宽度。在这种情况下，50%。