Height of table needs to be same height as panel

Question

In both IE8 and Firefox I am experiencing the following:

I have a panel that is 30px in height, within this panel I have a single row table with 30px in height. When it displays on the browser window the table does not fill the height of the panel (there is a small amount of the panel showing on the top and bottom. How do I correct this so that the table takes up the entire height of the table?

HEADERPANELTABLE CSS:

table.masterHeader
{
    background-color:transparent;
    border-collapse:collapse;
    height:30px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0;
    margin-bottom:0;
    padding:0;
    display:block;
    width:820px;
    }

HEADERPANEL CSS:

.HeaderPanel
        {
            background-color:#0079d0;
            height:30px;
            margin-left:auto;
            margin-right:auto;
            margin-bottom:0px;
            margin-top:0px;
            padding:0;
            width:820px;
            }

SPACER CSS:

div.Spacer
{
    background-color:transparent;
    height:30px;
    }

MAINPANEL CSS:

.MainPanel
{
    background-color:#6699cc;
    height:700px;
    margin-left:auto;
    margin-right:auto;
    width:820px;
    }

HTML CODE:

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div class="Page">
    <asp:Panel ID="HeaderPanel" CssClass="HeaderPanel" runat="server">
        <table class="masterHeader" cellspacing="0" cellpadding="0">
            <tr>
                <td class="Account"></td>
                <td class="Name"></td>
                <td class="Spacer"></td>
                <td class="CompanyName"></td>
                <td class="Logout"></td>
            </tr>
        </table>
    </asp:Panel>
    <asp:RoundedCornersExtender ID="HeaderPanelRounded" TargetControlID="HeaderPanel" runat="server" Radius="3" Corners="Bottom"></asp:RoundedCornersExtender>
    <div class="Spacer">&nbsp;</div>
    <asp:Panel ID="MainPanel" runat="server" CssClass="MainPanel">
        <div class="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>
    </asp:Panel>
</div>
<asp:RoundedCornersExtender ID="rceMainPanel" runat="server" TargetControlID="MainPanel" Radius="3">
</asp:RoundedCornersExtender>

Answer 1

set the cellspacing to 0

<table cellspacing="0">
   <tr>
      <td></td>
   </tr>
</table>

Answer 2

Have you looked at the page in something like Firebug, where you can look at each DOM element, see the attributes (like margin, padding, and so on). That way you might be able to see exactly where that extra spacing is coming from, and what styling attributes are being applied to each element.

Answer 3

You haven't posted code (HTML or CSS) or stated what browsers you are seeing this in, so difficult to know for sure. Some suggestions:

• make sure your table has zero margins
• make sure the panel doesn't have any padding
• make sure cell spacing is zero
• make sure some other element isn't blocking the table
• make sure your css styling is not being over-ridden somewhere

If you don't have it already, you should install the Firebug addin https://addons.mozilla.org/en-US/firefox/addon/1843/ for Firefox. This makes it extremely easy to inspect the DOM and CSS styling applied.

Answer 4

I notice that you aren't doing anything about your table borders. Could this be the gap you are seeing? If your borders have any width for any reason then they could be showing which might be giving you the effect in question.

I made a quick jsfiddle proof of concept based on what I assume your outputted HTML will look like in its simplest form. I'm not familiar with the RoundedCornersExtender control though and I suspect that is modifying the HTML of the main div.

http://jsfiddle.net/tAgp3/1/

You can see that this simplified form works but I assume that the rounded corners is trying to do some nasty tricks with embedding extra DIVs with background to do rounded corners. These could be what is causing your additional padding.

Again I ask if you can post the actual html outputted to the browser so we can see if this is the case or not.

Answer 5

Because an ASP:Panel breaks up the panel into div tags and with rounded corners it add anothe 1px border to the panel which is placed after the table has been placed. In order to fix this the table had to be placed within a div tag and float the div above the panel.