Fatal编程技术网
  • javascript/
  • Javascript 如何调整表格大小以填充可用区域？

Javascript 如何调整表格大小以填充可用区域？

javascript php html css

Javascript 如何调整表格大小以填充可用区域？,javascript,php,html,css,Javascript,Php,Html,Css,我有一个网页，我希望内容能够由用户调整大小。该表是从php创建的，因此它可以小于可用区域，通常会大于可用区域。我制作的小提琴的内容超过了可用区域（由于大小的原因，这篇文章不允许这样做），它从屏幕底部展开。我得到了正确调整大小的宽度，但小提琴没有显示它。这个问题可以通过fiddle中的css和那里的html或者这里的html来解决，其中表的行被复制了大约20次 我想要一个滚动条，当数据超过可用的屏幕区域和表格，以适应内容区域。如果我将高度从100%更改为固定像素长度，则只能显示scroolbar。

我有一个网页，我希望内容能够由用户调整大小。该表是从php创建的，因此它可以小于可用区域，通常会大于可用区域。我制作的小提琴的内容超过了可用区域（由于大小的原因，这篇文章不允许这样做），它从屏幕底部展开。我得到了正确调整大小的宽度，但小提琴没有显示它。这个问题可以通过fiddle中的css和那里的html或者这里的html来解决，其中表的行被复制了大约20次

我想要一个滚动条，当数据超过可用的屏幕区域和表格，以适应内容区域。如果我将高度从100%更改为固定像素长度，则只能显示scroolbar。但这样它就不会调整大小

我可以用javascript调整内容大小，但无法解决如何修复表的问题。我尝试了style.height和offsetheight，但offsetheight是只读的，style.height会更改，但表不会更改

这是你的电话号码

代码如下：

<html>
<head>

<link rel=Stylesheet Type='text/css' href=ERP.css> 

<script type="text/javascript">

    function displayPrint()
    {           
        document.forms["reload"].submit();
    }

    function ResizeTable()
    {           
        var calculatedWidth = document.documentElement.clientWidth - 300;
        var tableHeight = document.getElementById("content").offsetHeight;
        document.getElementById("content").style.width = calculatedWidth + 'px';
        document.getElementById("ImageData").style.height = tableHeight + 'px';
    }

    if(window.attachEvent) {
        window.attachEvent('onload', ResizeTable);
    } else {
        if(window.onload) {
            var curronload = window.onload;
            var newonload = function() {
                curronload();
                ResizeTable();
            };
            window.onload = newonload;
        } else {
            window.onload = ResizeTable;
        }
    }

    </script>

</head>
<body>

<div id="wrapper">

    <header>

        <br>
        <form id='reload' name="Actions" action="Viewer.php" method="post">
            <span style='color:white'>Whole Number</span>


            <input type="text" id='WholeNumber' name="WholeNumber"    
                list="WholeNumberList" onchange="displayPrint()" 
                value="SS8618"">
            <datalist id="WholeNumberList">
                <option value=SS9230>
            </datalist>
        </form>

    </header>

    <div id="sidebar">
    </div>

<div id="content">

<Table id="ImageData" cellspacing="0" cellpadding="0" border="0"><tr><td>
    <Table cellspacing="0" cellpadding="1" border="2">
        <TR><TH class='medium'>Whole Nbr</TH>
        <TH class='small'>Type</TH>
        <TH class='small'>Size</TH>
        <TH class='small'>Revision</TH>
        <TH class='small'>Other Nbr</TH>
        <TH class='small'>Sheet Nbr</TH>
        <TH class='small'>Of Sheets</TH>
        <TH class='small'>Frame Nbr</TH>
        <TH class='small'>Of Frames</TH>
        <TH class='medium'>Doc Title</TH>
        <TH class='medium'>Volume</TH>
        <TH class='small'>Note</TH>
        <TH class='small'>Prnt</TH>
        <TH class='small'>Obs</TH>
        <TH class='medium'>FilePath</TH>
        <TH class='medium'>FileName</TH>
        <TH class='medium'>FileExtension</TH>
        <TH class='small'>Base Doc</TH>
        <TH class='medium'>Acc Doc Nbr</TH>
        <TH class='medium'>CommonSubDirectory</TH>
        <TH class='medium'>LatestImage</TH>
        </TR>
    </Table></td></tr>
    <tr><td><div class="scrollingTable">
        <Table cellspacing="0" cellpadding="1" border="2">
            <TR><TD class='medium'>SS8618</TD>
            <TD class='small'>DD</TD>
            <TD class='small'>A</TD>
            <TD class='small'>4</TD>
            <TD class='small'></TD>
            <TD class='small'>7</TD>
            <TD class='small'>12</TD>
            <TD class='small'>1</TD>
            <TD class='small'>1</TD>
            <TD class='medium'>BONDING, ADHESIVE, OF ACOUSTIC INTERIOR</TD>
            <TD class='medium'>63642</TD>
            <TD></TD>
            <TD class='small'>No</TD>
            <TD class='small'>No</TD>
            <TD class='medium'>200312ACD\52819</TD>
            <TD class='medium'>0060</TD>
            <TD class='medium'>PDF</TD>
            <TD class='small'>Yes</TD>
            <TD class='medium'></TD>
            <TD class='medium'>\CDVolumes</TD>
            <TD class='medium'>0</TD></TR>
        </Table></div></td></tr></Table>
    </div>

</div>

<footer>

    <br>

</footer>

</body>
</html>


函数displayPrint（）
{           
document.forms[“reload”].submit（）；
}
函数ResizeTable（）
{           
var calculatedWidth=document.documentElement.clientWidth-300；
var tableHeight=document.getElementById（“内容”）.offsetHeight；
document.getElementById（“content”）.style.width=calculatedWidth+'px'；
document.getElementById（“ImageData”）.style.height=tableHeight+'px'；
}
如果（窗口附件）{
window.attachEvent（'加载'，可调整大小）；
}否则{
if（窗口加载）{
var curronload=window.onload；
var newonload=函数（）{
currenload（）；
可调整大小（）；
};
window.onload=newonload；
}否则{
window.onload=可调整大小；
}
}


整数

对于滚动条，您可以设置为特定高度，并使溢出：自动；也许CSS中的calc（）可以吗？calc（）成功了！！谢谢你！！