Bagaimana untuk Membuat Pautan Sama Tinggi dengan Baris Jadual?

Jadikan Pautan Sama Ketinggian Baris Jadual

Dalam pemformatan jadual, pautan boleh diletakkan dalam setiap sel untuk memudahkan interaksi pengguna. Walau bagaimanapun, apabila kandungan sel berbeza dalam ketinggian, pautan mungkin tidak memenuhi keseluruhan ruang menegak baris, yang membawa kepada penampilan yang tidak diingini.

Untuk menyelesaikan isu ini, penggayaan CSS bagi sel jadual dan elemen pautan mereka boleh diubah suai:

1. Laksanakan Paparan: Sekat:

<code class="css">td a {
    display: block;
}</code>

2. Tetapkan Margin Negatif dan Equal Padding:
Untuk mengambil kira sel dengan berbilang baris, tetapkan margin negatif yang besar dan padding sama pada elemen blok. Ini memaksa pautan untuk mengembangkan dan memenuhi seluruh ruang.

<code class="css">td a {
    ...
    margin: -10em;
    padding: 10em;
}</code>

3. Cegah Limpahan:
Untuk memastikan kandungan yang melimpah disembunyikan, tambahkan yang berikut pada elemen induk:

<code class="css">td {
    overflow: hidden;
}</code>

Contoh yang menunjukkan teknik ini:

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

Dengan pelarasan ini, pautan kini akan mengisi keseluruhan ketinggian baris jadual, memberikan pengalaman pengguna yang lebih seragam dan interaktif.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Pautan Sama Tinggi dengan Baris Jadual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!