javascript - 如何从网页大小控制网页元素大小

Question

大家好，

实际上，我的网页中有一个大表格，我想在缩小网页大小时减小它的大小。现在宽度和高度处于自动状态，当我缩小页面时，我的 table 的一部分被隐藏了。我知道，这是一个基本案例..但我对 css 很陌生。有人可以帮助我吗？谢谢

ClassDisplay.prototype.displayList = function(list,h)
    {
    //var font = {'font-family':'monospace', 'font-weight':'plain', 'font-size': 15 };
        h = '<div id="plot">';
        h += '<button id="plotshow" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" style="margin-top: 2.3%;">Plot Visualisation</button>';
        h += '</div>';
        h +="<table id=tablesorterr border='1'>";

    var List=list;
    //var header = list[0];
    //var data=list.splice(3);
    //var w = colWidths(header, data, font);

        for(var i=0;i<List.length;i++)
        {
            if(i==0)
            {
                h+="<thead>";
                h+="<tr>";
                for(var j=0;j<List[i].length;j++)
                {
                    h+="<th id='tabSSHeader_"+List[i][j]+"'><span>"+List[i][j]+"</span></th>";
                }
                h+="</tr>";
            }
            h+="</thead>";

            h+="<tbody>";
            if(i>=3)
            {
                h+="<tr>";
                for(var j=0;j<List[i].length;j++)
                {
                    objetSite.CURTAB = List[i][j];

                    if(j==0)
                    {

                        h+="<td><a href='#' rel='"+objetSite.CURTAB+"' class='clickOnTabLink'>"+objetSite.CURTAB+"</a></td>";
                    }
                    else
                    h+="<td>"+objetSite.CURTAB+"</td>";
                }
                h+="</tr>";
            }
            h+="</tbody>";
        }
        h+="</table>";
        h += '<div id="plot">';
        h += '<button id="plotshow" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">Plot Visualisation</button>';
        h += '</div>';

        $("#my_list").html(h);  


        $("#tablesorterr").tablesorter();

    for(var j=0;j<List[0].length;j++)
        {
        $('#tabSSHeader_'+List[0][j]).tooltip2(List[2][j]);
        }

    };

Answer 1

使用 CSS 来完成这项工作。 jQuery 很好，但您不需要它。在 css 中使用@media 查询 http://css-tricks.com/css-media-queries/