테이블 셀 링크를 전체 행 높이에 걸쳐 만드는 방법은 무엇입니까?

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

링크가 포함된 셀이 있는 표를 생성할 때 사용자가 아무 곳이나 클릭할 수 있도록 하는 것이 바람직합니다. 셀 내에서 링크의 작업을 트리거합니다. 그러나 셀이 여러 줄에 걸쳐 있고 같은 행의 다른 셀에 더 적은 줄이 있는 경우 더 짧은 셀이 행의 전체 세로 공간을 채우지 못할 수 있습니다.

이 문제를 해결하기 위한 일반적인 접근 방식은 링크된 셀을 설정하는 것입니다. display: block 속성을 사용하여 셀 내의 요소가 블록 요소로 동작하도록 합니다. 이렇게 하면 링크가 셀의 전체 너비와 높이로 확장될 수 있습니다. 그러나 일부 셀에 여러 줄이 있는 경우 한 줄 셀이 시각적으로 더 짧아 보일 수 있습니다.

이 문제에 대한 해결책은 블록 요소에 음수 여백과 동일한 패딩을 적용하는 것입니다. 음수 여백은 블록 요소가 셀 경계를 넘어 확장되도록 하고, 패딩은 텍스트가 셀 내용과 겹치는 것을 방지합니다. 또한 상위 테이블 셀의 오버플로 속성을 숨김으로 설정하면 셀 경계 외부의 콘텐츠 오버플로를 방지할 수 있습니다.

다음 업데이트된 CSS 코드를 고려하세요.

td {
    overflow: hidden;
}
td a {
    display: block;
    margin: -10em;
    padding: 10em;
}

이러한 조정을 통해 표 셀 내의 링크는 전체 행 높이를 채우도록 늘어나 콘텐츠 길이에 관계없이 모든 셀의 모양이 일관되게 유지됩니다.

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