어떻게 아이콘을 테이블 셀의 맨 위에 배치 할 수 있습니까?

Question

테이블 셀 <td> 안에 일부 아이콘을 배치하려하지만 화면의 오른쪽 위 (테이블 셀 외부)에 위치하게됩니다. 내 코드의

짧은 버전은 다음과 같이이다 : td_name 위치가 상대 및 action로 설정되어

<td class="td_name"> 
    <div class="actions"> 
    <div class="floatLeft iconset_16px update_sprite_bw_16px" title="Update"></div> 
    <div class="floatLeft iconset_16px settings_sprite_bw_16px" title="Settings"></div> 
    <div class="floatLeft iconset_16px delete_sprite_bw_16px" title="delete"></div> 
    </div> 
    <div class="gal_name"> 
    Some name 
    </div> 
</td> 

이 절대로 설정됩니다. 이것은 작동하지만 이번에는 작동하지 않습니다.

무엇이 여기에 있습니까? Se full code example on jsFidle.

내가<td class="td_name"> 내부의 action DIV 를 배치하기 위해 노력하고있어

참고.
jsFiddle 스틸에 jsFiddle의 HTML 창의 오른쪽 상단 구석에 iconset_16px div가 표시되면 예제가 작동하지 않습니다.

#sim_gallery .defaultList tr td.name { position: relative; width: 200px; height: 100px; } 
#sim_gallery .defaultList tr td .actions { position: absolute; top: 0px; right: 0px; margin: 5px;} 

주 2
이 테이블의 사용에 익숙하지 않은 사람들을위한 것입니다.

90 년대 초반에 페이지 레이아웃에 테이블을 사용하는 것이 매우 인기가 있었고 매우 간단했습니다. 그러나 디자이너들은 레이아웃 변경이 a **에서 고통이라는 것을 곧 이해했습니다. 테이블을 사용하면 several more disadvantages이됩니다.

그래, 테이블을 사용하지 않고도 아무 것도 설계 할 수 있습니다.

언제 테이블을 사용해야합니까? 표는 일반적으로 표 형식의 데이터를 표시하는 데 사용됩니다. 웹용 엑셀 시트입니다. 필자의 경험에 따르면 목록 요소와 div보다 테이블 데이터를 구조화하는 것이 훨씬 쉽습니다. 따라서 어떤 경우에는 웹 사이트에 부정적인 영향을 미치지 않을 것이라는 것을 알고 테이블을 사용합니다.

제발, 테이블을 사용하는 것이 얼마나 나쁜지에 대한 토론을 시작하지 마십시오. 내 문제 : 해결하기 위해 에너지를 사용

Answer 1

더 많은 테스트를 한 후에는 표 셀을 배치 할 수없는 것처럼 보입니다. 어떤 종류의 의미가 있습니다. 그러나 저는 테이블 셀 자체를 배치하려고 시도하지 않고 셀 안의 내용을 배치하려고했습니다.

웹에 대한 더 많은 연구 (여기서는 쓸모없는 토론)가 있은 후 I found this article. 이것은 기본적으로 나에게 짧은 대답을 준다 : 아니, 불가능하다.

이 예제에서는 jQuery를 사용합니다. 하지만 여전히 CSS를 사용하여이 작업을 수행하고자하므로 대안 솔루션을 생각해 냈습니다.

나는 단순히 표 셀의 DIV 안에 내용을 넣고이 DIV가 표 셀만큼 큰지 확인합니다. 모두 괜찮습니다. :)

.wrapper { width: 200px; height: 100px; line-height: 100px; position: relative; border: solid 1px #666; } 
.actions { position: absolute; top: 0px; right: 0px; } 
.iconset_16px { height: 16px; width: 16px; background-color: #87ceeb; margin: 3px;} 
.floatLeft { float:left!important; } 

<table> 
<tr> 
<td> 
<div class="wrapper"> 
<div class="actions"> 
    <div title="Update" class="floatLeft iconset_16px"></div> 
    <div title="Settings" class="floatLeft iconset_16px"></div> 
    <div title="delete" class="floatLeft iconset_16px"></div> 
</div> 

<div class="gal_name"> 
    <a title=" Adventure" href="#"> Adventure</a> 
</div> 
<div> 
</td> 
</tr> 
</table> 

Answer 2

당신이 을하려고하는지 전혀 알고 있지만 필요에 따라 당신이 당신의 아이콘의 위치를 ​​조정 한 후 당신의 <td>에 position: relative을 설정하고 시도하지 마십시오 ? actions에서

http://jsfiddle.net/Z3kpr/1/

Answer 3

귀하의 div 요소 (이 매우 이유로 나쁜 생각) 당신의 !important 플래그 왼쪽 부유하는 그래서 그들은 부모의 위치를 ​​무시합니다.

플로트를 제거하면 올바르게 배치됩니다.

의 업데이트 된 바이올린 중 하나가인데 차이점을 확인할 수 있습니다. http://jsfiddle.net/u9p4u/1/