td 요소에 떠 다니는 요소

Question

이 스타일을 사용할 수 없습니다. 내 그림에서 살펴 보자 :

마크 업 : 나는 블록으로 <a> 요소를 사용하여 <td> 요소를 클릭 할 수 있도록하기 위해 노력하고있어

<h1Title</h1> 
<table> 
    <tr> 
     <td> 
      <dfn>help</dfn> 
      <a href="link0.php"> 
      <span>text</span></a> 
     </td> 
     <td><a href="link1.html"> 
      <span>text</span></a> 
     </td> 
    </tr> 
</table> 

. 하지만 <dfn> 요소가있는 작은 "헤더"를 <td> 안에 넣어야합니다. <dfn>을 오른쪽 상단에 정렬하고 을<a> 세로 텍스트 정렬을 해당 컨테이너와 비교하여 <dfn>과 충돌하지 않고 보존 할 수 있습니다.

HTML

<h1>Title</h1> 
<table> 
    <tr> 
     <td> 
      <span class="cellContainer"> 
       <dfn>help</dfn> 
       <a href="link0.php">text</a> 
      </span> 
     </td> 
     <td> 
      <a href="link1.html">text</a> 
     </td> 
    </tr> 
</table> 

CSS : 나는 당신의 마크 업 비트를 변경하고 게시 된 이미지에 가까운 무언가를 얻기 위해 약간의 위치와 패딩을 추가

Answer 1

은 사전에 감사합니다

td { 
    border: 1px solid black; 
} 
.cellContainer { 
    position: relative; 
    display: inline-block; 
    padding: 12px 0; 
} 
a { 
    background: grey; 
    padding: 12px 24px; 
} 
dfn { 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

데모에서

jsFiddle Demo

경계가 셀 경계를 나타낸다. 회색 배경이 링크 영역입니다.