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

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