전체 행 높이에서 테이블 셀 링크를 클릭할 수 있게 만드는 방법은 무엇입니까?

셀 링크로 테이블 행을 세로로 채우기

HTML 테이블에서 사용자는 셀 내의 아무 곳이나 클릭하여 관련 항목을 따라갈 수 있기를 기대합니다. 링크. 그러나 표 셀이 여러 줄에 걸쳐 있고 다른 셀이 한 줄로 되어 있는 경우 한 줄 셀이 행의 전체 세로 공간을 차지하지 않을 수 있습니다.

이 문제를 해결하려면 표 셀 링크의 표시 속성을 설정하세요. 차단하는 것이 일반적인 접근 방식입니다. 그러나 이것이 모든 경우에 문제를 완전히 해결하지는 못할 수도 있습니다.

해결책

표 셀 링크가 전체 행 높이를 채우도록 하려면 다음 CSS 규칙을 구현하십시오.

<code class="css">td {
    overflow: hidden;
}
td a {
    display: block;
    margin: -10em;
    padding: 10em;
}</code>

블록 요소에 임의로 큰 음수 여백과 동일한 패딩을 설정하면 링크가 테이블 행의 전체 수직 공간에 걸쳐 확장됩니다. 과도한 패딩이 셀 외부로 쏟아지는 것을 방지하기 위해 상위 td 요소에 오버플로 속성이 숨겨지도록 설정되어 있습니다.

예

<code class="html"><td style="overflow: hidden;">
    <a style="display: block; margin: -10em; padding: 10em;" href="http://www.google.com/">Cell 1</a>
</td></code>

이 업데이트된 CSS는 다음을 보장합니다. 링크가 포함된 표 셀은 줄 수에 관계없이 항상 전체 높이에서 클릭할 수 있습니다.

위 내용은 전체 행 높이에서 테이블 셀 링크를 클릭할 수 있게 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!