如何根据网页大小控制网页元素大小

How to controle web page element size from the web page size

本文关键字:网页 元素 控制 何根      更新时间:2023-09-26

大家好

实际上,我的网页中有一个大表格,我想在减小网页大小时减小它的大小。到目前为止,宽度和高度都处于自动状态,当我缩小页面时,表格的一部分被隐藏了。我知道,这是一个基本的情况。但我对 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]);
        }
    };

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