Adjust the tabel height in an ASP.NET page

Hi all,

I have an ASP.NET page that has three tables. The first is the page title, the second is a data area and the third is the message area.

The first table (title) and the third (messages) has a fixed height. But, the second (data), should have its height adjusted to the maximum possible for all three tables shown in the same screen.

I post below a sample code of ASP.NET page, that can be changed by anyone to demonstrate the solution of the problem.

Thanks, Marcelo Camarate
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Form3.aspx.vb" Inherits="TreeView.Form3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Example of adjusting the height of a table</title>
   
</head>
<body style="width: 100%; height: 100%">
    <form id="form1" runat="server" >
    <div>
        <table cellpadding="0" cellspacing="0" style="width: 100%; height: 50px">
            <tr>
                <td style="width: 50px; background-color: #66ffff; height: 20px;">
                </td>
                <td style="background-color: #ccffff; height: 20px">
                </td>
                <td style="width: 50px; background-color: #66ffff; height: 20px">
                </td>
            </tr>
            <tr>
                <td style="width: 50px; background-color: #66ffff; height: 35px">
                </td>
                <td style="background-color: #ccffff; height: 35px; vertical-align: middle; text-align: center; font-weight: bold;">
                    This area has a fixed height = 35px</td>
                <td style="width: 50px; background-color: #66ffff; height: 35px">
                </td>
            </tr>
            <tr>
                <td style="width: 50px; background-color: #66ffff; height: 20px;">
                </td>
                <td style="background-color: #ccffff; height: 20px">
                </td>
                <td style="width: 50px; background-color: #66ffff; height: 20px">
                </td>
            </tr>
        </table>
        <br />
                <table cellpadding="0" cellspacing="0" style="width: 100%">
            <tr>
                <td style="width: 50px; height: 20px; background-color: #9900ff;">
                </td>
                <td style="height: 20px; background-color: #ff33ff;">
                </td>
                <td style="width: 50px; height: 20px; background-color: #9900ff;">
                </td>
            </tr>
            <tr>
                <td style="width: 50px; background-color: #9900ff;">
                </td>
                <td style="font-weight: bold; vertical-align: middle; background-color: #ff99ff; text-align: center;">
                    This area should be adjusted according to the size of the screen and this text should be showed
                    in the center of the cell.</td>
                <td style="width: 50px; background-color: #9900ff;">
                </td>
            </tr>
            <tr>
                <td style="width: 50px; height: 20px; background-color: #9900ff;">
                </td>
                <td style="height: 20px; background-color: #ff33ff;">
                </td>
                <td style="width: 50px; height: 20px; background-color: #9900ff;">
                </td>
            </tr>
        </table>
        <br />
                <table cellpadding="0" cellspacing="0" style="width: 100%; height: 50px">
            <tr>
                <td style="width: 50px; background-color: #00cc33; height: 20px;">
                </td>
                <td style="background-color: #99ff66; height: 20px">
                </td>
                <td style="width: 50px; background-color: #00cc33; height: 20px">
                </td>
            </tr>
            <tr>
                <td style="width: 50px; background-color: #00cc33; height: 35px">
                </td>
                <td style="background-color: #99ff66; height: 35px; vertical-align: middle; text-align: center; font-weight: bold;">
                    This area also has a fixed height = 35px</td>
                <td style="width: 50px; background-color: #00cc33; height: 35px">
                </td>
            </tr>
            <tr>
                <td style="width: 50px; background-color: #00cc33; height: 20px;">
                </td>
                <td style="background-color: #99ff66; height: 20px">
                </td>
                <td style="width: 50px; background-color: #00cc33; height: 20px">
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Open in new window

Marcelo CamarateAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Fareed Ali KhanCommented:
Hi,
try the following:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Form3.aspx.vb" Inherits="TreeView.Form3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Example of adjusting the height of a table</title>
   
</head>
<body style="width: 100%; height: 100%">
    <form id="form1" runat="server" >
    <div>
	<table cellpadding="0" cellspacing="0" style="width: 100%; height: 100%;">
            <tr>
                <td style="width: 100%; height: 50px;">

        <table cellpadding="0" cellspacing="0" style="width: 100%; height: 50px;">
            <tr>
                <td style="width: 50px; background-color: #66ffff; height: 20px;">
                </td>
                <td style="background-color: #ccffff; height: 20px">
                </td>
                <td style="width: 50px; background-color: #66ffff; height: 20px">
                </td>
            </tr>
            <tr>
                <td style="width: 50px; background-color: #66ffff; height: 35px">
                </td>
                <td style="background-color: #ccffff; height: 35px; vertical-align: middle; text-align: center; font-weight: bold;">
                    This area has a fixed height = 35px</td>
                <td style="width: 50px; background-color: #66ffff; height: 35px">
                </td>
            </tr>
            <tr>
                <td style="width: 50px; background-color: #66ffff; height: 20px;">
                </td>
                <td style="background-color: #ccffff; height: 20px">
                </td>
                <td style="width: 50px; background-color: #66ffff; height: 20px">
                </td>
            </tr>
        </table>
</td></tr>
            <tr>
                <td style="width: 100%; height: auto;">
                <table cellpadding="0" cellspacing="0" style="width: 100%; height: 100%;">
            <tr>
                <td style="width: 50px; height: 20px; background-color: #9900ff;">
                </td>
                <td style="height: 20px; background-color: #ff33ff;">
                </td>
                <td style="width: 50px; height: 20px; background-color: #9900ff;">
                </td>
            </tr>
            <tr>
                <td style="width: 50px; background-color: #9900ff;">
                </td>
                <td style="font-weight: bold; vertical-align: middle; background-color: #ff99ff; text-align: center;">
                    This area should be adjusted according to the size of the screen and this text should be showed
                    in the center of the cell.</td>
                <td style="width: 50px; background-color: #9900ff;">
                </td>
            </tr>
            <tr>
                <td style="width: 50px; height: 20px; background-color: #9900ff;">
                </td>
                <td style="height: 20px; background-color: #ff33ff;">
                </td>
                <td style="width: 50px; height: 20px; background-color: #9900ff;">
                </td>
            </tr>
        </table>
</td></tr>
            <tr>
                <td style="width: 100%; height: 50px;">
                <table cellpadding="0" cellspacing="0" style="width: 100%; height: 50px;">
            <tr>
                <td style="width: 50px; background-color: #00cc33; height: 20px;">
                </td>
                <td style="background-color: #99ff66; height: 20px">
                </td>
                <td style="width: 50px; background-color: #00cc33; height: 20px">
                </td>
            </tr>
            <tr>
                <td style="width: 50px; background-color: #00cc33; height: 35px">
                </td>
                <td style="background-color: #99ff66; height: 35px; vertical-align: middle; text-align: center; font-weight: bold;">
                    This area also has a fixed height = 35px</td>
                <td style="width: 50px; background-color: #00cc33; height: 35px">
                </td>
            </tr>
            <tr>
                <td style="width: 50px; background-color: #00cc33; height: 20px;">
                </td>
                <td style="background-color: #99ff66; height: 20px">
                </td>
                <td style="width: 50px; background-color: #00cc33; height: 20px">
                </td>
            </tr>
        </table>
</td></tr>
    </div>
    </form>
</body>
</html>

Open in new window

0
Fareed Ali KhanCommented:
please append the table close tag before the div close tag. i forgot that one.  although it will not change the output.
0
Marcelo CamarateAuthor Commented:
Hi Farred,

Thank you for your quickly reply. But, apparently, don't worked. The cell that would to be adjusted according to the screen height remained unchanged.

Any other ideas?

Regards, Marcelo Camarate
0
Angular Fundamentals

Learn the fundamentals of Angular 2, a JavaScript framework for developing dynamic single page applications.

Fareed Ali KhanCommented:
Hi,

attached test.html is working fine in IE6/IE7 and FF3.0. Please verify it.
Test.html
0
hehdaddyCommented:
Sorry for the unintuitive class names. I moved the inline styles to classes and used jQuery to compute the height of the middle table cell. It works pretty good.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="th01.aspx.cs" Inherits="EE.TableHeight.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
      <title></title>
      <style type="text/css">
            html, head, body, form
            {
                  padding: 0;
                  margin: 0;
            }
            
            #topTable
            {
                  position: absolute;
                  top: 0;
                  left: 0;
            }
            
            #bottomTable
            {
                  position: absolute;
                  bottom: 0;
                  left: 0;
            }
            
            #middleTable
            {
                  position: absolute;
                  top: 75px;
                  left: 0;
            }
            
            .sh1
            {
                  height: 20px;
                  width: 50px;
                  background-color: #66ffff;
                  font-size: 1px;
            }
            
            .mh1
            {
                  height: 20px;
                  background-color: #ccffff;
                  font-size: 1px;
            }
            
            .shc1
            {
                  width: 50px;
                  background-color: #66ffff;
                  height: 35px;
                  font-size: 1px;
            }
            
            .shc
            {
                  background-color: #ccffff;
                  height: 35px;
                  vertical-align: middle;
                  text-align: center;
                  font-weight: bold;                  
            }

            .sc1
            {
                  width: 50px;
                  height: 20px;
                  background-color: #9900ff;
                  font-size: 1px;
            }
            
            .mc1
            {
                  height: 20px;
                  background-color: #ff33ff;
            }
            
            .cc1
            {
                  width: 50px;
                  background-color: #9900ff;
                  font-size: 1px;
            }
            
            .c1
            {
                  font-weight: bold;
                  vertical-align: middle;
                  background-color: #ff99ff;
                  text-align: center;
            }
            
            .sf1
            {
                  height: 20px;
                  width: 50px;
                  background-color: #00cc33;
                  font-size: 1px;
            }
            
            .mf1
            {
                  height: 20px;
                  background-color: #99ff66;
                  font-size: 1px;
            }

            .sfc1
            {
                  width: 50px;
                  background-color: #00cc33;
                  height: 35px;
                  font-size: 1px;                  
            }
            
            .sfc
            {
                  background-color: #99ff66;
                  height: 35px;
                  vertical-align: middle;
                  text-align: center;
                  font-weight: bold;
            }

      </style>
      
      <script src="http://localhost:49159/jquery-1.4.2.min.js" type="text/javascript"></script>

      <script type="text/javascript">
            $(document).ready(function () {
                  // Resize the page on initial load.
                  ResizePage();

                  // Attach the resize event to the window and call the ResizePage
                  // function when it is fired.
                  $(window).resize(function () {
                        ResizePage();
                  });

                  // Set the height of the content cell to:
                  // The height of the window - the height of the header - the height of the footer -
                  // the height of the content header and footer.
                  function ResizePage() {
                        $(".c1").height($(window).height() -
                        $("#topTable").outerHeight() -
                        $("#bottomTable").outerHeight() -
                        ($(".sc1").height() * 2));
                  }
            });
      </script>

</head>
<body>
      <form id="form1" runat="server">
      <div>
            <table id="topTable" cellpadding="0" cellspacing="0" style="width: 100%;">
                  <tr>
                        <td class="sh1">&nbsp;
                        </td>
                        <td class="mh1">&nbsp;
                        </td>
                        <td class="sh1">&nbsp;
                        </td>
                  </tr>
                  <tr>
                        <td class="shc1">&nbsp;
                        </td>
                        <td class="shc">
                              This area has a fixed height = 35px
                        </td>
                        <td class="shc1">&nbsp;
                        </td>
                  </tr>
                  <tr>
                        <td class="sh1">&nbsp;
                        </td>
                        <td class="mh1">&nbsp;
                        </td>
                        <td class="sh1">&nbsp;
                        </td>
                  </tr>
            </table>
            <table id="middleTable" cellpadding="0" cellspacing="0" style="width: 100%">
                  <tr>
                        <td class="sc1">
                        </td>
                        <td class="mc1">
                        </td>
                        <td class="sc1">
                        </td>
                  </tr>
                  <tr>
                        <td class="cc1">&nbsp;
                        </td>
                        <td class="c1">
                              This area should be adjusted according to the size of the screen and this text should
                              be showed in the center of the cell.
                        </td>
                        <td class="cc1">&nbsp;
                        </td>
                  </tr>
                  <tr>
                        <td class="sc1">&nbsp;
                        </td>
                        <td class="mc1">&nbsp;
                        </td>
                        <td class="sc1">&nbsp;
                        </td>
                  </tr>
            </table>
            <table id="bottomTable" cellpadding="0" cellspacing="0" style="width: 100%;">
                  <tr>
                        <td class="sf1">&nbsp;
                        </td>
                        <td class="mf1">&nbsp;
                        </td>
                        <td class="sf1">&nbsp;
                        </td>
                  </tr>
                  <tr>
                        <td class="sfc1">&nbsp;
                        </td>
                        <td class="sfc">
                              This area also has a fixed height = 35px
                        </td>
                        <td class="sfc1">&nbsp;
                        </td>
                  </tr>
                  <tr>
                        <td class="sf1">&nbsp;
                        </td>
                        <td class="mf1">&nbsp;
                        </td>
                        <td class="sf1">&nbsp;
                        </td>
                  </tr>
            </table>
      </div>
      </form>
</body>
</html>
0
Fareed Ali KhanCommented:
Hi,

You should check the html after removing of the doc type declaration.

Remove the 2nd line of doc type from the html source of aspx page.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.