Question

如何在表格tr的顶部进行div显示，因此表格行不会展开。

当我点击任何“.property_menu_link”锚标签以展开菜单时，整行会展开。我希望菜单覆盖在TR的顶部，而不是扩展表格，但我正在努力实现这一目标。

我做错了什么？ 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

您需要使用css了解样式表。你不能用div和table做你想做的事。您将不得不替换行的内容而不是覆盖行

您可能需要使用跨度（rowspan，colspan等...）

有关详细信息，请参阅此处http://www.w3.org/TR/html4/struct/tables.html和此处http://www.w3schools.com/html/html_tables.asp

在第二个链接上，您可以使用此处的try it链接并粘贴浏览器中的源代码，这比使用firebug更好，更容易。

另外，请参阅@ TomalakGeret'kal上关于你问题的斜线评论

如何让我的div叠加在其他表行之上？

1 个答案: