Question

我有一个网页，我希望用户可以调整内容的大小。该表是从php创建的，因此它可能小于可用区域，通常会更多。我制作的小提琴比可用区域的内容更多（由于尺寸，这篇文章不允许它）并且它从屏幕的底部扩展。我得到了正确调整大小的宽度，但小提琴没有显示出来。这个问题可以用小提琴中的css和那里的html或者这里的html重新定义，表格的行复制了大约20次。

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

我能够使用javascript调整内容大小，但无法解决如何修复表格。我尝试了style.height和offsetheight但是offsetheight是只读的，而style.height改变但是表没有。

这是fiddle。

以下是代码：

<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>

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

0 个答案: