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

Question

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

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

目前，我可以使用 display:none 在 :nth-child 上使用 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();
        });
    }
});