Bagaimanakah Saya Boleh Memastikan Pautan Sel Jadual Menjangkau Keseluruhan Ketinggian Baris?

Pastikan Pautan Sel Jadual Menjangkau Keseluruhan Ketinggian Baris

Apabila membentangkan data dalam format jadual, selalunya wajar untuk membuat pautan boleh klik dalam setiap sel jadual . Untuk memastikan pautan ini berfungsi sepenuhnya, tanpa mengira ketinggian sel, pertimbangkan untuk melaksanakan teknik berikut:

Dalam kod CSS anda, gunakan gaya berikut:

<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>

Dengan menetapkan margin negatif dan padding yang sepadan, anda dengan berkesan mencipta ilusi bahawa pautan memenuhi keseluruhan ketinggian sel. Jidar negatif menolak kandungan pautan melepasi kawasan yang boleh dilihat, manakala padding menambah ruang menegak untuk dipadankan dengan baris jadual sekeliling.

Penyelesaian ini memastikan bahawa walaupun satu sel mengandungi berbilang baris teks manakala sel lain hanya mempunyai satu baris, pautan dalam semua sel boleh diklik tanpa mengira ketinggiannya. Pengguna boleh mengklik di mana-mana dalam sel untuk mencetuskan tindakan pautan.

Contoh kod HTML dengan CSS yang dikemas kini:

<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>

Hasilnya ialah jadual di mana pengguna boleh mengklik di mana-mana dalam sel untuk ikut pautan yang sepadan, walaupun dalam baris dengan ketinggian sel yang berbeza-beza.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memastikan Pautan Sel Jadual Menjangkau Keseluruhan Ketinggian Baris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!