Javascript 响应表-用DIV替换表

我正在创建自己的响应表。我就快到了，特别是在我的帮助下。现在我需要做的是，当浏览器的宽度低于996px时，添加或替换表下的div。到目前为止，我已经得到了这个

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

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

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

当你把你的浏览器窗口变小的时候，它就工作了，但是obvis。调整大小时不会恢复正常

你可以看看这个

---

我的问题是，我如何才能让它正常工作，还有更好的方法吗？

您可以在纯css中这样做。虽然不漂亮，但你可以做到

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

就这样

---

处理这一问题的最简单方法是预先构建内容，而不是动态构建。使用您使用jQuery呈现内容的方法，我们将对其进行如下修改：

首先，我们需要将“移动”表格设置为具有正确的样式。在这种情况下，不显示：

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

---

有一个在线工具，您只需单击几下即可将表转换为结构化div元素：

---

阅读有关此功能的更多信息，并在此处找到您必须使用的css代码：

您为什么要尝试创建响应表？@Charles EdouardCoste该问题如何有效？如果是数据表，请让浏览器完成它的工作！如果它不是一个数据表，那么它就不应该是一个表。。。如果你用这种方法，你的响应表和我的完全不同。这绝对是正确的。谢谢你，克里斯：

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();
    }
});

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