Question

How can I make a div display over the top of a table tr, so the table row does not expand.

Wwhen I click on any of the “.property_menu_link” anchor tags to expand the menu the whole row expands. I want the menu to overlay over the top of the TR’s, not expand the table, but I’m struggling on getting this to happen.

What am I doing wrong?
HTML:

<table>
    <tr>
        <td valign="top" align="left">
                <div class="property_menu_container">

                    <div style="display: none;" class="property_links_box ui-corner-all">
                        <ul class="basic">
                            <li>    
                                <a onclick="open_me()" >Property Details</a>
                            </li>
                            <li>    
                                <a onclick="open_me()" >Units, Leases &amp; Occupants</a>
                            </li>
                        </ul>
                    </div>
                    <div class="property_menu_link">
                        <a>
                            <img src="images/maximize.png" id="68_p_img_folder">
                        </a>
                    </div>
                </div>                  
                <span class="page_name property_name_span">Property Name 1 Here</span>
        </td>
    </tr>
    <tr>
        <td valign="top" align="left">
                <div class="property_menu_container">

                    <div style="display: none;" class="property_links_box ui-corner-all">
                        <ul class="basic">
                            <li>    
                                <a onclick="open_me()" >Property Details</a>
                            </li>
                            <li>    
                                <a onclick="open_me()" >Units, Leases &amp; Occupants</a>
                            </li>
                        </ul>
                    </div>
                    <div class="property_menu_link">
                        <a>
                            <img src="images/maximize.png" id="68_p_img_folder">
                        </a>
                    </div>
                </div>                  
                <span class="page_name property_name_span">Property Name 2 Here</span>
        </td>
    </tr>
</table>

CSS:

/******************************
    Property Menu dropdown
******************************/
.property_menu_container {
    width: 200px;
    /*height: 300px; --> this causes the row height for properties to be 300px before it's expanded*/
    position: relative;
}
.property_name_span{position: absolute; left:40px;}
.property_links_box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 15px;
    padding:10px;
    border: 3px solid #000000;
    background-color: #FFFFFF;
    filter:alpha(opacity=75);
    opacity:.75;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/


} 
.property_menu_link {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.property_links_box{
    z-index: 10;
}

/******************************
    END Property Menu dropdown
******************************/

Javascript:

$(document).ready(function(){       

    $("div.property_menu_link a").toggle(function(){
            //1st Click
            $(this).parent().siblings(\'.property_links_box\').show();
            $(this).parent().parent(\'.property_menu_container\').css("height", "300px");
        }, function() { 
            //2nd click
            $(this).parent().siblings(\'.property_links_box\').hide();
            $(this).parent().parent(\'.property_menu_container\').css("height", "1px")
        });
});

Answer 1

You need to learn about styling tables using css. You can’t do what you want to do with divs and tables.
You are going to have to replace the contents of the row rather than overlay the row

You will probably need to use spans (rowspan, colspan etc…)

See here for more details http://www.w3.org/TR/html4/struct/tables.html and here http://www.w3schools.com/html/html_tables.asp

On that second link you can use the try it here link and paste in the source code from your browser which is great and easier than using firebug.

Plus see the comment about slashes on you question from @TomalakGeret’kal