테이블 셀 링크가 전체 행 높이에 걸쳐 있는지 어떻게 확인할 수 있습니까?

표 셀 링크가 전체 행 높이에 걸쳐 있는지 확인

데이터를 표 형식으로 표시할 때 각 표 셀 내에 클릭 가능한 링크를 만드는 것이 바람직한 경우가 많습니다. . 이러한 링크가 셀 높이에 관계없이 완벽하게 작동하도록 하려면 다음 기술을 구현하는 것이 좋습니다.

CSS 코드에서 다음 스타일을 적용합니다.

<code class="css">td {
    overflow: hidden;
}
td a {
    display: block;  /* Allow links to fill the full height */
    margin: -10em;   /* Create a large negative vertical margin */
    padding: 10em;  /* Add an equal amount of vertical padding to compensate */
}</code>

음수 여백 설정 패딩을 일치시키면 링크가 전체 셀 높이를 채우는 듯한 착각을 효과적으로 만들 수 있습니다. 음수 여백은 링크 내용을 가시 영역 밖으로 밀어내는 반면 패딩은 주변 테이블 행과 일치하도록 수직 공간을 추가합니다.

이 솔루션을 사용하면 한 셀에 여러 줄의 텍스트가 포함되어 있고 다른 셀에는 한 줄만 있는 경우에도 가능합니다. 한 줄이면 높이에 관계없이 모든 셀의 링크를 클릭할 수 있습니다. 사용자는 셀 내의 아무 곳이나 클릭하여 링크 작업을 실행할 수 있습니다.

업데이트된 CSS가 포함된 HTML 코드 예:

<code class="html"><table border="1">
  <tbody>
    <tr>
      <td><a href="link1.html">Cell 1 with multiple lines</a></td>
      <td><a href="link2.html">Cell 2 with single line</a></td>
      <td><a href="link3.html">Cell 3 with single line</a></td>
    </tr>
  </tbody>
</table></code>

결과는 사용자가 셀의 아무 곳이나 클릭하여 링크 작업을 수행할 수 있는 테이블입니다. 셀 높이가 다양한 행에서도 해당 링크를 따라가세요.

위 내용은 테이블 셀 링크가 전체 행 높이에 걸쳐 있는지 어떻게 확인할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!