Question

作为我的响应式设计的一部分，如果视口大小缩小超过某个点，我会尝试动态隐藏表的列。我试过试试所有.style.visibility = "collapse"元素均为<tr>，所有.style.opacity = "0"元素均为<td>。然后，我必须隐藏表格的background，这样它才能显示表格宽度仍然存在，同时还增加了表格的width（160％），以便剩余列填满了屏幕。

虽然这实际上适用于Chrome，Firefox，IE（包括ie8！）和我的移动浏览器，但它似乎是一个荒谬的kludgy hack。还有其他建议吗？

    var jmq = window.matchMedia("screen and (max-width: 610px)");
    jmq.addListener(jmqListener);

    function jmqListener(jmq){
        var colTitle = getElementsByClassName('col-title');
        var colName = getElementsByClassName('col-name');
        var colDate = getElementsByClassName('col-date');
        var colFb = getElementsByClassName('col-fb');
        var table = getElementsByClassName('default');

        if (jmq.matches || window.innerWidth < 611 ) {
            //Mobile
            ... resize controls
            // hide table columns
            if (colName !== null){
                for(var i=0,j=colName.length; i<j; i++){
                    colName[i].style.visibility = "collapse";
                    colName[i].style.opacity = "0";
                }
            }
            // HACK - increase table width and hide the background which would show the reserved table space
            if (table !== null){
                for(var i=0,j=table.length; i<j; i++){
                    table[i].style.width = "160%";
                    table[i].style.background = "transparent";
                }
            }
        }
        else {
            // Desktop
            ... restore control layout for desktop
            // restore table column(s)
            if (colName !== null){
                for(var i=0,j=colName.length; i<j; i++){
                    colName[i].style.visibility = "visible";
                    colName[i].style.opacity = "100";
                }
            }
            if (table !== null){
                for(var i=0,j=table.length; i<j; i++){
                    table[i].style.width = "100%";
                    table[i].style.background = "#C8C8C8";
                }
            }
        }    
    }

function getElementsByClassName(className) {
    if (document.getElementsByClassName) { 
        return document.getElementsByClassName(className); }
    else { 
        return document.querySelectorAll('.' + className); 
    } 
}

Answer 1

我会改变你的for循环：

for(var i=0; i<colName.length; i++){
    colName[i].style.display = "none";
}

请注意，您的j变量完全是多余的。

在visibility display: none中，您会找到：

<强>崩溃
对于表行，列，列组和行组，将隐藏行或列，并删除它们将占用的空间（就像display：none已应用于表的列/行）。但是，仍然会计算其他行和列的大小，就像折叠的行或列中的单元格一样。这是为了快速删除行/列而设计的无需重新计算表格每个部分的宽度和高度的表格。

强调我的

上述解决方案主要是使用{{1}}

Answer 2

尝试使用CSS3媒体查询。

E.g。

@media all and (max-width: 700px) {
table, tr, td {
    display: none;
}

当您的设备视口宽度小于或等于700像素时，上述display: none;将用于隐藏您的桌子，tr，td或您拥有的内容。

用javascript隐藏表列 - 动态调整布局

2 个答案: