Rumah >hujung hadapan web >tutorial css >Bolehkah Pengepala Melekit Digunakan Dalam Div Tatal untuk Pengepala Jadual?

Bolehkah Pengepala Melekit Digunakan Dalam Div Tatal untuk Pengepala Jadual?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-11-02 08:29:29512semak imbas

Can Sticky Headers be Used Within Scrolling Divs for Table Headers?

Tajuk Melekit Dalam Div Tatal

Kedudukan: melekit; hartanah telah mendapat daya tarikan dalam Webkit, membolehkan elemen kekal tetap dalam bekas induk mereka semasa menatal. Walau bagaimanapun, sesetengah pembangun telah menyatakan keperluan untuk melanjutkan fungsi ini kepada menatal elemen div yang mengandungi jadual.

Bolehkah kedudukan melekit digunakan pada pengepala jadual dalam div menatal?

Jawapan:

Memang, kedudukan: melekit; kini boleh digunakan untuk elemen mulai 2018!

Pelaksanaan:

Cuma tambah baris berikut pada lembaran gaya CSS anda:

<code class="css">thead th { position: sticky; top: 0; }</code>

Prasyarat:

  • Pastikan jadual anda mengandungi dan elemen.

Contoh Penanda Jadual:

<code class="html"><table>
    <thead>
        <tr>
            <th>column 1</th>
            <th>column 2</th>
            <th>column 3</th>
            <th>column 4</th>            
        </tr>    
    </thead>
    <tbody>
      // body code
    </tbody>
</table></code>

Pilihan Tambahan:

  • Untuk membetulkan baris pertama semasa menatal, gunakan yang berikut:
<code class="css">thead tr:first-child th { position: sticky; top: 0; }</code>

Sokongan Penyemak Imbas:

Sehingga Mac 2018, kedudukan melekit untuk elemen iklan disokong secara meluas merentas penyemak imbas moden , terima kasih atas usaha komuniti pembangun.

Atas ialah kandungan terperinci Bolehkah Pengepala Melekit Digunakan Dalam Div Tatal untuk Pengepala Jadual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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