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

作为响应式设计的一部分，如果视口大小缩小到某个点以上，我将尝试动态隐藏表的列。我已经试着设置了 所有

元素的

.style.visibility=“collapse”

，所有

元素的

.style.opacity=“0”

。然后，我必须隐藏表的

背景

，这样它就不会显示表的宽度仍然存在，同时还要增加表的

宽度

（160%），以便剩余的列填充屏幕

虽然这在Chrome、Firefox、IE（包括ie8！）和我的移动浏览器上都有效，但这似乎是一个可笑的拙劣的黑客行为。还有其他建议吗

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

var jmq=window.matchMedia（“屏幕和（最大宽度：610px）”；
addListener（jmqListener）；
函数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）{
//流动的
…调整控件的大小
//隐藏表列
if（colName！==null）{
对于（var i=0，j=colName.length；i我将更改for循环：

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

for（var i=0；i尝试使用CSS3媒体查询

例如

当您的设备查看端口的宽度小于或等于700px时，上面的
显示：无；
将用于隐藏您的表、tr、td或其他内容。
您不使用媒体查询的原因是什么？在隐藏
元素之前，我在
元素上尝试了
显示：无
。不确定我为什么要隐藏
元素在更改<代码>不透明度<代码>之前，不要尝试在<代码>上显示：无<代码>。
一个奇怪的现象是，它会打乱手机对<代码>缩放
级别的计算，因此<代码>视口
与容器不完全匹配。我必须缩小，因此不需要滚动。需要进行其他调整。谢谢您的帮助。媒体查询uld可能在这种情况下工作。我需要js来更改其他属性。使用js更改属性与CSS不兼容，因为它们在不同级别工作=>js在元素级别工作，@media queries在CSS级别工作。无论如何，我稍后会尝试一下并验证。谢谢你的建议。+1是的，它可以工作。我可能是g不过，我还是坚持使用javascript，因为所有其他视口修改都需要在那里完成。谢谢！
@media all and (max-width: 700px) {
table, tr, td {
    display: none;
}