CSS Media queries and div elements

问题

Is there any functionality similar to @media queries in CSS to dynamically change the styling AND works in a element?

I wrote the media queries to hide certain elements if the available width is too low, but when I place these elements in a div, the elements that are supposed to hide show up.

When I searched in similar posts, it looks like @media queries only work with screen size, but I have not found a solution to this question.

I cannot show the exact code I am using (due to proprietary concerns), but this is pretty much the structure.

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

Since the div element only has a width of 1081px, I want the table header column to hide, but I cannot find a way to do that.

来源：https://stackoverflow.com/questions/26496801/css-media-queries-and-div-elements