행 높이를 채우기 위해 표 셀 링크를 확장하는 방법은 무엇입니까?

행 높이를 채우기 위해 표 셀 링크 확장

표 형식의 데이터 시각화에서 셀 링크가 전체 수직 공간을 덮지 못하는 경우가 많습니다. 특히 셀의 높이가 다양한 경우 더욱 그렇습니다. 부분적으로 가려진 셀을 클릭하면 원하는 작업이 실행되지 않을 수 있으므로 사용자 상호 작용이 방해될 수 있습니다.

이 문제를 해결하려면 다음 기술을 사용할 수 있습니다.

여백 설정 및 드라이브 링크 확장에 패딩

1. 오버플로: 상위 테이블 셀에 숨김을 적용합니다.
2. display: block을 사용하여 링크를 블록 요소로 변환합니다.
3. 블록 요소에 임의로 큰 음수 여백(예: -10em)과 동일한 양의 패딩(예: 10em)을 설정합니다.

샘플 코드 구현

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

이 조정은 링크를 테이블 셀 경계 너머로 확장하여 전체 행 높이를 효과적으로 덮습니다. 이제 사용자는 셀에 여러 줄의 콘텐츠가 있는지 여부에 관계없이 셀의 아무 곳이나 클릭하여 링크를 활성화할 수 있습니다.

여기에서 업데이트된 JSFiddle 데모를 참조하세요: http://jsfiddle.net/RXHuE/213/

위 내용은 행 높이를 채우기 위해 표 셀 링크를 확장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!