Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Memanjangkan Pautan Sel Jadual untuk Mengisi Ketinggian Baris?

Bagaimana untuk Memanjangkan Pautan Sel Jadual untuk Mengisi Ketinggian Baris?

Barbara Streisand
Lepaskan: 2024-11-03 11:49:03
asal
288 orang telah melayarinya

How to Extend Table Cell Links to Fill Row Height?

Melanjutkan Pautan Sel Jadual untuk Mengisi Ketinggian Baris

Dalam visualisasi data jadual, pautan sel selalunya gagal untuk menutup keseluruhan ruang menegak sesuatu baris, terutamanya apabila sel mempunyai ketinggian yang berbeza-beza. Ini boleh menghalang interaksi pengguna, kerana mengklik pada sel yang ditutup separa mungkin tidak mencetuskan tindakan yang diingini.

Untuk membetulkan isu ini, teknik berikut boleh digunakan:

Tetapkan Margin dan Padding to Drive Link Extension

  1. Gunakan limpahan: tersembunyi pada sel jadual induk.
  2. Tukar pautan kepada elemen blok menggunakan paparan: blok.
  3. Tetapkan margin negatif yang besar secara sewenang-wenangnya (cth., -10em) dan jumlah pelapik yang sama (cth., 10em) kepada elemen blok.

Contoh Kod Pelaksanaan

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

Pelarasan ini memanjangkan pautan melepasi sempadan sel jadual, dengan berkesan meliputi keseluruhan ketinggian baris. Pengguna kini boleh mengklik di mana-mana dalam sel untuk mengaktifkan pautan, tidak kira sama ada sel itu mempunyai berbilang baris kandungan.

Rujuk demonstrasi JSFiddle yang dikemas kini di sini: http://jsfiddle.net/RXHuE/213/

Atas ialah kandungan terperinci Bagaimana untuk Memanjangkan Pautan Sel Jadual untuk Mengisi Ketinggian Baris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan