使用CSS / JavaScript迭代隐藏html表的最后一列

Question

I am attempting to modify a table created by xx user through Sharepoint with responsive design in mind. What I want to do is iteratively hide the last visible column in the table based on the width of the screen.

For example: a user creates a 10-column table and the max screen size is 1200. If they minimize the window to 600px, then the last 5 columns should not be shown. If they minimize the window to 800px, then the last 3 columns should not be shown.

Currently I can selectively remove columns with CSS using display:none on the :nth-child, but that doesn't account for whether or not the display is already set to none in order to move on to the n-1-child.

Is there a way to do this with CSS, or is this concept limited to Javascript? And if so, how?

Thank you.

Answer 1

http://jsfiddle.net/tcvB6/1/ Here's one possibility. I didn't set it to continually update if the screen size is changed, but you could add that in. I wrapped the tables in a couple of divs to help the CSS, and then added this function:

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