표 셀에서 링크를 만들 수있는 방법

표 셀에서 링크를 만들 수있는 방법

---

다음이 있습니다.

<td>
  some text
  <div>a div</div>
</td>

전체 <td>...</td>를 하이퍼 링크 로 만들고 싶습니다 . JavaScript를 사용하지 않는 것이 좋습니다. 이것이 가능한가?

---

예, 가능 <td>합니다. 문자 그대로는 아니지만 그 안에있는 내용입니다. 간단한 트릭은 콘텐츠가 셀의 테두리까지 확장되도록하는 것입니다 (하지만 테두리 자체는 포함되지 않음).

이미 설명했듯이 이것은 의미 상 정확하지 않습니다. a요소는 인라인 요소 및 블록 레벨 요소로서 사용되어서는 안된다. 그러나 다음은 대부분의 브라우저에서 작동하는 예입니다 (그러나 JavaScript와 td : hover CSS 스타일이 훨씬 깔끔 할 것입니다).

<td>
  <a href="http://example.com">
    <div style="height:100%;width:100%">
      hello world
    </div>
  </a>
</td>

추신 : 이 스레드의 다른 솔루션에서 설명한 것처럼a CSS를 사용하여 블록 수준 요소 를 변경 하는 것이 실제로 더 깔끔합니다 . 그래도 IE6에서는 잘 작동하지 않지만 뉴스는 아닙니다.)

대체 (비자 문) 솔루션

당신의 세계가 인터넷 익스플로러 (요즘 드물게)라면, HTML 표준을 위반하고 이것을 작성할 수 있습니다. 이것은 예상대로 작동하지만 매우 눈살을 찌푸리고 잘못된 조언으로 간주 될 것입니다. ). IE 이외의 브라우저는 링크를 렌더링하지 않지만 테이블을 올바르게 표시합니다.

<table>
    <tr>
        <a href="http://example.com"><td  width="200">hello world</td></a>
    </tr>
</table>

---

이 코드를 사용하십시오. 를 확장 <a>하여 셀을 가로로 채 웁니다. 세로로 채우려면 height속성도 사용하십시오 .

td a {
  width: 100%;
  display: block;
}

td {
  /* Cell styles for demonstration purposes only */
  border: 1px solid black;
  width: 10em;
}

<table><tr>
  <td>
    <a href="http://example.com">
      Hello World
    </a>
  </td>
</tr></table>

---

실제 앵커 요소를 사용하여 블록으로 설정하는 것이 좋습니다.

<div class="divBox">
    <a href="#">Link</a>
</div>

.divBox
{
    width: 300px;
    height: 100px;
}
.divBox a
{
    width: 100%;
    height: 100%;
    display: block;
}

This will set the anchor to the same dimensions of the parent div.

---

Here is my solution:

<td>
   <a href="/yourURL"></a>
   <div class="item-container">
      <img class="icon" src="/iconURL" />
      <p class="name">
         SomeText
      </p>
   </div>
</td>

(LESS)

td {
  padding: 1%;
  vertical-align: bottom;
  position:relative;

     a {
        height: 100%;
        display: block;
        position: absolute;
        top:0;
        bottom:0;
        right:0;
        left:0;
       }

     .item-container {
         /*...*/
     }
}

Like this you can still benefit from some table cell properties like vertical-align. (Tested on Chrome)

---

I'd like to make the entire td a hyperlink. I'd prefer without javascript. Is this possible?

That's not possible without javascript. Also, that won't be semantic markup. You should use link instead otherwise it is a matter of attaching onclick handler to <td> to redirect to some other page.

---

You can creat the table you want, save it as an image and then use an image map to creat the link (this way you can put the coords of the hole td to make it in to a link).

참고URL : https://stackoverflow.com/questions/3337914/how-can-i-make-a-link-from-a-td-table-cell