CSS : 테이블 상단에 이미지를 배치하는 방법

숫자가있는 테이블이 있는데 데이터의 테두리 가장자리에있는 테이블 위에 이미지를 추가하고 싶습니다. 그러나 나는 이것을 수행하는 방법을 아이디어가, 누군가가 올바른 방향으로 나를 가리킬 수 있습니까? 다음은CSS : 테이블 상단에 이미지를 배치하는 방법

내가 달성하고자하는 것입니다 : 순간

enter image description here

나는 둥근 "화살표"와 "="이미지없이 테이블이 있습니다.

감사

이 코드 구현 한 아래의 조언을 촬영 : 당신은 화살표 이미지 ISN '을 볼 수 있듯이

enter image description here

<td> 
<img src="images/up.png" alt="increase" height="20" width="20" style="position: relative; left: 47px;"/>&euro;<?php echo $cSalePrice; ?> 
</td>

는 다음과 같은 결과를 제공하기를 t 블록을 중심으로하고 텍스트 "65"가 아래로 내려갔습니다 ...

아이디어가 있으십니까?

이제 의견이 제안 된 내용을 시도하면 "65 € 쟁점이 수정되었습니다. 하지만 여전히 이미지가 수직으로 상자를 중심으로되지 않습니다

enter image description here

출처

2012-02-02 NeverPhased

이미지의 위치는 절대, 상단 및 왼쪽 (또는 오른쪽 하단)이어야합니다. <> 위치가 상대 위치 여야합니다.

그래서, 뭔가 같은 :.

<td style="position:relative;">&euro;65<img src="..." style="position:absolute; left:30px; top: 3px;"> </td>

이 방법, 당신은에서의 TD를 상대적으로

을 이미지를 배치 할 수 있습니다 그리고 당신은 대신 인라인 코드

출처

2012-02-02 23:38:49 driedoezoe

하나의 솔루션은 예를 들어, 왼쪽 TD에 <img src="...">을 배치하고 권리를 이동하는 그에게 다음과 같은 스타일을 제공하는 것입니다 그 레이아웃 위치 :

출처

2012-02-02 23:22:26

차라리 위치 설정 것 : 상대; 및 위치 : 절대; 이미지에. 상단과 왼쪽을 모두 설정해야합니다. 그렇지 않으면 IE가 실패합니다. – Adaz

뭔가 등의 클래스를 사용한다 이것이 효과가있을 수 있습니다. 여분의 열을 만들고 폭을 0으로 만드십시오. 이미지 대신 div를 사용하고 있지만 동일합니다. 당신은 here

CSS를

table { 
    margin: 10px; 
} 

table td { 
    border: 1px solid black; 
    padding: 10px; 
    width: 100px; 
} 

table td.thin { 
    position: relative; 
    width: 0; 
    padding: 0; 
    border: none; 
    text-align: center; 
} 

table td.thin div { 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    margin-left: -10px; 
    margin-top: -10px; 
    top: 50%; 
    left: 50%; 
    background: red; 
    text-align: center; 
    line-height: 20px; 
    border-radius: 10px; 
}

그리고 이것은 수직 및 수평 중심을 확인해야하고 다른 세포에 영향을주지 않습니다 html로

<table> 
    <tr> 
     <td>r1c1</td> 
     <td class="thin"><div>×</div></td> 
     <td>r1c3</td> 
    </tr> 
    <tr> 
     <td>r2c1</td> 
     <td class="thin"><div>×</div></td> 
     <td>r2c3</td> 
    </tr> 
</table>

시도 할 수 있습니다.

출처

2012-02-02 23:39:28 Godisemo

테이블을 상대적으로 설정하십시오.

그런 다음 자신의 각 모서리에 절대적으로 배치 된 4 개의 이미지를 추가하십시오.예 :

table{position:relative} 
table img.topright{position:absolute;top:0;right:0;} 
table img.bottomleft{position:absolute;bottom:0;left:0;}

등

출처

2012-02-02 23:46:52 etoxin

CSS : 테이블 상단에 이미지를 배치하는 방법

답변

관련 문제