Question

我正在尝试通过Sharepoint修改由xx用户创建的表，并考虑到响应式设计。我想要做的是根据屏幕的宽度迭代隐藏表格中的最后一个可见列。

例如：用户创建一个10列表，最大屏幕大小为1200.如果他们将窗口最小化为600px，则不应显示最后5列。如果它们将窗口最小化为800px，则不应显示最后3列。

目前我可以使用：nth-child上的display：none选择性地删除CSS，但这并不能说明显示是否已设置为none以便转到n-1-子。

有没有办法用CSS做到这一点，还是这个概念仅限于Javascript？如果是这样，怎么样？

谢谢。

Answer 1

http://jsfiddle.net/tcvB6/1/这是一种可能性。如果屏幕大小发生变化，我没有将其设置为不断更新，但您可以将其添加进去。我将表格包装在几个div中以帮助CSS，然后添加此功能：

$("table").each(function(){
    var $table = $(this);
    while ($table.outerWidth() > $("#wrapOuter").outerWidth()) {
        $table.find("tr").each(function(){
            $(this).find("td:visible, th:visible").last().hide();
        });
    }
});

使用css / javascript迭代隐藏html表的最后一列

1 个答案: