HTML5의 요소 (하이퍼 링크)에 표 행 래핑

전체 행을 클릭 할 수있게하기 위해 "a"요소 (하이퍼 링크)에 표 행을 래핑하려고합니다. HTML5 doctype을 사용하고 있는데, 이런 종류의 일을 허용해야하며 사실 링크에서 다른 블록 수준 요소를 래핑하는 데 아무런 문제가 없었습니다. 사실, 전체 테이블 주위에 요소를 배치하는 것이 효과가있는 것 같습니다.HTML5의 요소 (하이퍼 링크)에 표 행 래핑

표식 다음 다음 HTML5 spec 가입일

<table> 
    <tbody> 
     <a href="#"> 
      <tr> 
       <td>25 Nov 2010</td> 
       <td>Active</td> 
      </tr> 
     </a> 
    </tbody> 
</table>

출처

2010-12-06 Alex G

[ 태그 포장 HTML 테이블 행 (HTTP의 가능한 중복 : // stackoverflow.com/questions/10245279/wrapping-html-table-rows-in-a-tags) – kenorb

: tr 소자가 사용될 수있다

컨텍스트되는하십시오 THEAD 요소의 자식으로

.
tbody 요소의 하위 항목입니다.
tfoot 요소의 하위 항목입니다.
테이블 요소의 하위 요소로서, caption, colgroup 및 thead 요소 뒤에 있지만, 테이블 요소의 하위 요소 인 tbody 요소가없는 경우에만 해당합니다.

즉 tr을 a 요소로 상속받을 수 없습니다. 귀하의 경우에는 대신 Javascript onclick을 사용할 것입니다. 또는 각 행에 동일한 앵커 요소를 넣을 수 있습니다 td s.

희망이 도움이됩니다.

출처

2010-12-06 17:42:55 Trimack

아, 정말 고마워! 슬프게도 을 하이퍼 링크로 묶는 것은 (가장 좋은 솔루션이 아니라) 잘 작동하지 않는 것 같습니다. 위로 jQuery로 돌아 간다! –

나는'td'를 감싸지 말고'td' 안에 앵커를 넣고 전체 공간을 덮기 위해 크기를 조정합니다. 'Content of td' – Trimack

왜 사용하지 않습니까? display: table-* CSS? 그것은 widely supported이고 매우 원활 :

HTML :

<div class="table"> 
    <div class="tbody"> 
     <a href="#" class="tr"> 
      <div class="td">25 Nov 2010</div> 
      <div class="td">Active</div> 
     </a> 
    </div> 
</div>

CSS :

.table { display: table; } 
.tbody { display: table-row-group; } 
.tr { display: table-row; } 
.td { display: table-cell; }

See codepen

출처

2015-07-23 18:13:43

HTML5의 요소 (하이퍼 링크)에 표 행 래핑

답변

관련 문제