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

Question

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

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

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

有没有办法用 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();
        });
    }
});