HTML テーブルにうまく表示されるレコードのテーブルがあります。この表の最後の列には、行にカーソルを合わせるとアイコンが表示されます。ユーザーがアイコンにカーソルを合わせると、その行に関連するすべてのアクションのドロップダウン メニューが表示されます。
現在、アイコンが設定されている td がPosition:absoluteあり、ドロップダウン メニューの div も Position Absolute に設定されています。
これは、ドロップダウン メニューの Div を、関連する行に対して適切に配置できることを意味します。
まず、なぜこれが当てはまるのか完全にはわかりません。TD を絶対として、メニュー Div を相対として必要だと思っていましたが、そうではありません。
私が現在抱えている実際の問題 (私が持っている方法はすべてのブラウザーで機能するため) は、行が展開されて他の列のテキストの高さの 2 倍になることです。絶対配置が適用された 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>