【发布时间】：2012-04-22 21:18:22
【问题描述】：
我有一个记录表，它可以很好地显示在 HTML 表中。 当悬停该行时，该表的最后一列会显示一个图标。当用户悬停图标时，会出现一个下拉菜单，显示与该行相关的所有操作。
目前，我将 Icon 所在的 td 设置为 Position:absolute，并且下拉菜单的 div 也设置为 Position Absolute。
这意味着我可以对齐下拉菜单 Div 以与它相关的行很好地对齐。
首先我不完全确定为什么会这样。我原以为我需要将 TD 作为绝对值，将菜单 Div 作为相对值，但事实并非如此。
我目前遇到的实际问题（就像我在所有浏览器中的工作方式一样）是，当行扩展为其他列中文本高度的两倍时。应用绝对定位的 TD 不会扩展到 TR 的 100% 高度。这会导致在尝试悬停 tr 时出现问题，并且您移动到最后一个应该扩展到行高的 TD 并将其注册为悬停在 TR 上。
有什么想法可以解决这个问题吗？ 将图标放在相对的 div 中的问题是，我需要 div 为 td 的 100% 高度/宽度，以便能够将菜单正确对齐到行！
编辑： 根据要求一些 Html... 这是一个小胡子模板。即使您从未使用过它也不应该很难理解
<table>
<thead>
<tr>
<th style="width:15px"><input type="checkbox" class="GridSelectAll" onclick="GridSelectAll(this);" /></th>
<th class="tar" style="width:30px">
<a href="javascript:SortGrid('EmployeeId')" id="headerEmployeeId">
<%= GetTranslation("EmployeeId") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th style="width:120px">
<a href="javascript:SortGrid('FirstName')" id="headerFirstName">
<%= GetTranslation("FirstName") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th style="width:120px">
<a href="javascript:SortGrid('LastName')" id="headerLastName">
<%= GetTranslation("LastName") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th>
<a href="javascript:SortGrid('CompanyName')" id="headerCompanyName">
<%= GetTranslation("PrimayCompanyName") %><span class="sortArrow ui-icon" ></span>
</a>
</th>
<th style="width:55px">
<a href="javascript:SortGrid('EmployeeRowStatus')" id="headerEmployeeRowStatus">
<%= GetTranslation("EmployeeRowStatus") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th style="width:60px">
<a href="javascript:SortGrid('IsLocked')" id="headerIsLocked">
<%= GetTranslation("IsLocked") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th style="width:15px"></th>
</tr>
</thead>
<tbody>
{{#EmployeeSummaries}}
<tr>
<td><input type="checkbox" class="chkRowId" value="{{EmployeeId}}" /></td>
<td class="tar">{{EmployeeId}}</td>
<td>{{FirstName}}</td>
<td>{{LastName}}</td>
<td>{{PrimaryCompanyName}}</td>
<td>{{EmployeeRowStatus}}</td>
<td>{{IsLocked}}</td>
<td style="position:absolute;">
<a class="optlink"><span class="ui-icon ui-icon-triangle-1-s"></span></a>
<div class="optmenu">
<ul>
<li><a onclick="UpdateEmployee_LoadDialog({{EmployeeId}});"><%= GetTranslation("ManageEmployee")%></a></li>
<li><a onclick="showLoading();" href="../Core/AuditItem.aspx?{{ItemTypeItemIdQuerystring}}"><%= GetTranslation("ViewHistory")%></a></li>
<li><a onclick="showLoading();" href="UserGroupsEvo.aspx#/?PageIndex=0&Filter=EmployeeId~EqualTo~{{EmployeeId}}"><%= GetTranslation("ViewUserGroups")%></a></li>
<li><a onclick="showLoading();" href="UserGroup_Employees.aspx?{{EmployeeIdQuerystring}}"><%= GetTranslation("ManageUserGroups")%></a></li>
<li><a onclick="showLoading();" href="../Employee/EmployeePreferences.aspx?{{EmployeeIdQuerystring}}"><%= GetTranslation("ManagePreferences")%></a></li>
<li><a onclick="ResetPasswords_LoadDialog({{EmployeeId}});"><%= GetTranslation("ResetPassword")%></a></li>
<li><a onclick="SendWelcomeEmails_LoadDialog({{EmployeeId}});"><%= GetTranslation("SendWelcomeEmail")%></a></li>
<li><a onclick="AddEmployee_Company_LoadDialog({{EmployeeId}}, {{PrimaryCompanyId}});"><%= GetTranslation("AddToCompany")%></a></li>
<li><a onclick="LoginAsUser({{EmployeeId}});"><%= GetTranslation("LoginAsUser") %></a></li>
{{#HasOtherCompanies}}
<li class="subheader"><%= GetTranslation("ManageOtherCompanies") %></li>
{{/HasOtherCompanies}}
{{#Companies}}
<li>
<span style="vertical-align:top;" class="hh ui-icon ui-icon-circle-close" onclick='RemoveEmployeeFromCompany_LoadDialog(this, {{EmployeeId}}, {{CompanyId}}, "{{CompanyName}}");return false;' title="<%= GetTranslation("Remove") %>"></span>
<a onclick="ManageEmployee_Company_LoadDialog({{EmployeeId}}, {{CompanyId}});">
{{CompanyName}}
</a>
</li>
{{/Companies}}
</ul>
</div>
</td>
</tr>
{{/EmployeeSummaries}}
</tbody>
</table>
【问题讨论】：
-
你能发布一些示例代码吗？仅靠描述有点难以理解。
-
现在提供... .optlink span 是图标，.optmenu 是应该出现的下拉 div
-
您是否尝试过使
tdposition:relative？ -
Firefox 似乎忽略了它，因此它没有将菜单定位在 TD 的右上角，而是将其定位在正文的右上角。 Chrome 对它很好，而 IE 离它也很近。 （像素左右！）
-
这就是为什么会这样，
position: relative对表格元素的影响是未定义的stackoverflow.com/questions/4564638/…
标签： html css html-table position