2
HTML 테이블에 멋지게 표시되는 레코드 테이블이 있습니다. 이 테이블의 마지막 열은 행을 가져갈 때 아이콘을 표시합니다. 사용자가 아이콘을 가리키면 해당 행과 관련된 모든 동작에 대한 드롭 다운 메뉴가 나타납니다.CSS 드롭 다운 메뉴 테이블의 TD를 기준으로합니다.
현재 아이콘이 Position:absolute으로 설정되어 있고 드롭 다운 메뉴의 div도 절대 값 위치로 설정되어 있습니다.
즉, 관련 행과 잘 정렬되도록 드롭 다운 메뉴 Div를 정렬 할 수 있습니다.
처음에는 완전히 이유가 확실하지 않습니다. 나는 절대자로서 TD를 필요로하고 상대적인 것으로 메뉴 분과를 필요로 할 것이라고 생각했을 것이다. 그러나 이것은 단지 그럴만 한 것은 아니다.
현재 문제는 (모든 브라우저에서 작동하는 방식대로) 행이 다른 열의 텍스트에서 높이가 두 배로 확장 될 때입니다. 절대 위치가 적용된 TD는 TR의 100 % 높이가되지 않습니다. tr를 가져 오려고 할 때 문제가 발생하고 행 높이로 확장되어야하는 마지막 TD 위치로 이동하고이를 TR에서 호버 아웃으로 등록합니다.
이 문제를 해결할 수있는 아이디어가 있습니까? 상대적인 div에 아이콘을 두는 것의 문제점은 메뉴를 행에 맞게 정렬 할 수 있도록 div가 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>
당신이 몇 가지 예제 코드를 게시 할 수 시도 할 수 있습니다? 단지 설명 만하는 것이 어렵습니다. – Travesty3
가 제공되었습니다 ... .optlink span은 아이콘이고 .optmenu는 드롭 다운 div이며, 자리에 표시됩니다. – Steve
'td'위치를 만들려고 했습니까 : relative? – Travesty3