CSS Media查询和div元素

Question

是否有类似于CSS中@media查询的功能来动态更改样式并在元素中工作？

如果可用宽度太低，我编写了媒体查询来隐藏某些元素，但是当我将这些元素放在div中时，应该隐藏的元素显示出来。

当我在类似帖子中搜索时，看起来@media查询仅适用于屏幕大小，但我没有找到解决此问题的方法。

我无法显示我正在使用的确切代码（由于专有问题），但这几乎就是结构。

@media (max-width: 1124px) {
	th.longColTH {
		display: none;
		visibility: hidden;
	}
}

<div class="skPane" id="SkinPaneLeft" style="width: 1081px;">
  <table class="skTbl" id="SOMETABLE12345" style="border: 1px solid rgb(204, 204, 204); table-layout: fixed;">
    <thead>
      <tr class="colHdr">
        <th class="longColTH">I hide some times</th>
      </tr>
    </thead>
    <tbody>
        <!-- Some content here -->
    </tbody>
  </table>
</div>

由于div元素的宽度只有1081px，我希望表头列隐藏，但我找不到办法。