Html CSS将样式应用于单个元素而不是类

我正在设计一个反应灵敏的桌子。除了一个主要的bug，所有的东西都按我喜欢的方式工作。当我在一个小窗口上加载网格，然后展开窗口时，表不会随我一起展开。但是，如果我将其加载到一个较大的窗口中，然后将其缩小，它会按照我的预期进行响应，然后随着窗口的扩展而扩展。它的工作方式是，我用可选或基本类标记表格单元格，随着屏幕大小的减小，可选列会被删除

在逐步浏览CSS和Javascript之后，我发现了问题所在，但不确定是什么原因造成的。当我在更大的屏幕上加载表格时，css样式的display:none将应用于可选类，如：

.optional { display: none; }

这一切都有效

但是，当我首先在一个较小的窗口上加载表时，样式是内联应用的，如：

<td class='optional' style='display: none'>...</td>

这就是它中断的地方，因为样式应用得非常明确，我显示元素的逻辑没有任何效果。这是CSS中的一些奇怪的错误吗？以前有人见过这个吗

提前谢谢

更新：已解决

---

感谢您的快速回复和巨大的帮助。最终，问题出现在代码中的其他地方，而这些地方甚至与我的问题都不相关。不过，我很感激所有的帮助。

< P>当你使窗口变大时，你可能会考虑添加一个窗口大小调整事件处理程序，并调用一个函数来调整窗口的大小。如果你喜欢这个选项，我会发布代码

编辑： 代码：

html:

---

我不知道这是否能解决你的问题，但你忘了；登录您的代码：

错：

<td class='optional' style='display: none'>...</td>

正确：

<td class='optional' style='display: none;'>...</td>

---

我会放弃javascript，只使用媒体查询。媒体查询可以进入css文件中

.optional {
    display: none;
}
@media (min-width:980px) {
    .optional {
        display: table-cell;
    }
}

---

当屏幕大于980px时，这将使可选的css更改。您将避免javascript添加的内联样式。

如果在加载到浏览器之前html中没有style='display:none'，并且没有从后端代码中添加，则JS很可能会在页面加载时应用该样式。您可以尝试在关闭JS的情况下加载页面，看看是否是这种情况。您可以在演示中发布fiddle或jsbin链接吗？否则，很难帮助你。这更是我想要的。我有一些其他javascript函数，可以将表设置为可重用组件，并允许用户在任何屏幕大小下选中和取消选中要显示的列，因此我认为javascript解决方案是最好的。我在我的网站上也做过类似的事情。www.socialize24.com看一下身体标签。对不起。打字错误代码里写的没错，我只是打错了

<td class='optional' style='display: none;'>...</td>

.optional {
    display: none;
}
@media (min-width:980px) {
    .optional {
        display: table-cell;
    }
}