Question

我目前正在创建自己的响应表。我几乎在那里，特别是在Manji的帮助下。我现在需要做的是在浏览器宽度低于996px时附加或替换表格下方的div。到目前为止，我有这个

$(window).on("load resize orientationchange", function() {

        var width = $(window).width();

        if (width <= 996){
            $(table).replaceWith(output);
        } else {
            //bring it back
        }
    });

当您使浏览器窗口变小时，它会起作用，但是obvis。你调整大小时不会恢复正常。

您可以查看DEMO HERE。

我的问题是，我怎样才能让它正常工作，并且有更好的方法吗？

Answer 1

你可以用纯css做到这一点。它不会很漂亮，但你可以做到。

@media (max-width: 600px) {
  table, thead, tbody, th, tr, td {
    display: block;
  }
}

那就是它！

http://codepen.io/anon/pen/qFDvr

Answer 2

处理此问题的最简单方法是预先构建内容，而不是即时构建内容。使用您使用jQuery呈现内容的方法，我们将其修改如下：

首先，我们需要将'mobile'表设置为正确的样式（在这种情况下，没有显示）：

output += '<div class="mobiled-table" style="display: none">';

你的DOM构建的其余部分像往常一样继续进行，但是一旦我们完成它就立即渲染它：

output += '</div>';
var mobile_table = $(output);
$(table).after(mobile_table);

现在您的活动可以在我们渲染时自由隐藏/显示：

$(window).on("load resize orientationchange", function() {
    if ($(window).width() <= 996) {
        mobile_table.show();
        table.hide();
    } else {
        mobile_table.hide();
        table.show();
    }
});

这意味着当实际事件发生时，非常大的表将不会产生DOM构建时间（这对于大型表来说可能很重要）。这也意味着你可以将DOM构建推出jQuery（它不适合它，但正如你所看到的那样可以通过连接来实现 - 只要注意数据库中的符号小于或大于等等。它可以改为使用渲染非移动表的相同代码渲染移动表。

此外，正如Joe Frambach指出的那样，你可以将这些东西完全从jQuery转移到CSS中，在那里它会更快更清晰：

.mobiled-table { display: none }
@media (max-width: 996px) {
    table { display: none }
    .mobiled-table { display: block !important }
}

Answer 3

这是一个在线工具，只需点击几下，您就可以将表格转换为结构化div元素：www.html-cleaner.com

详细了解此功能，并在此处找到您必须使用的css代码：http://www.html-cleaner.com/features/replace-html-table-tags-with-divs/

响应表 - 用Div替换表

3 个答案: