Question

我正在设计一个响应表。一切都按我喜欢的方式工作，除了一个主要的bug。当我在一个小窗口上加载网格然后展开窗口时，表格不会随我展开。但是，如果我将它加载到一个更大的窗口然后将其缩小，它会按照我的预期响应，然后在展开窗口时展开。它的工作方式是我有表格单元格标有＆＃34;可选＆＃34;或者＆＃34;必要＆＃34;随着屏幕尺寸的减小，可选列会被删除。

在逐步完成CSS和Javascript之后，我发现了什么是错的，但不确定导致它的原因。当我在更大的屏幕上加载表格时，css样式＆＃34;显示：无＆＃34;正在应用于＆＃34;可选＆＃34;类似：

.optional { display: none; }

这一切都有效。

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

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

这是它破坏的地方，因为风格的具体应用，我展示元素的逻辑都没有任何效果。这是CSS中的一些奇怪的错误吗？有没有人遇到过这个？

提前致谢。

更新：已解决

感谢您的快速反应和极大的帮助。最终，问题出现在代码中的其他地方，甚至与我的问题无关。我很感激所有的帮助。

Answer 1

要使窗口变大时使其响应，可以考虑添加窗口调整大小事件处理程序并在调整窗口大小时调用函数来调整表的大小。如果您喜欢这个选项，我会发布代码。

修改代码：

HTML：

<body onload="window.addEventListener('resize', setTable); setTable();">

的javascript：

function setTable() { var windowWidth = window.innerWidth; document.getElementById('yourTable').style.width = windowWidth+'px'; //You may adjust this because for all I know there are other elements surrounding your table }

Answer 2

我不知道它是否能解决你的问题，但你忘记了＆＃34 ;;＆＃34;登录您的代码：

错：

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

正确：

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

Answer 3

我会删除javascript并只使用媒体查询。媒体查询可以放在您的css文件中。

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

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

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

3 个答案: