Les en-têtes collants peuvent-ils être utilisés dans les divisions défilantes pour les en-têtes de tableau ?

En-têtes collants dans les divisions défilantes

La position : collante ; La propriété a gagné du terrain dans Webkit, permettant aux éléments de rester fixes dans leurs conteneurs parents pendant le défilement. Cependant, certains développeurs ont exprimé le besoin d'étendre cette fonctionnalité aux éléments div défilants contenant des tableaux.

Le positionnement collant peut-il être appliqué aux en-têtes de tableau dans un div défilant ?

Réponse :

En effet, position : collante ; peut maintenant être utilisé pour elements à partir de 2018 !

Mise en œuvre :

Ajoutez simplement la ligne suivante à votre feuille de style CSS :

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

Prérequis :

• Assurez-vous que votre tableau comprend un et éléments.

Exemple de balisage de tableau :

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

Options supplémentaires :

• Pour corriger la première rangée du lors du défilement, utilisez ce qui suit :

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

Prise en charge des navigateurs :

Depuis mars 2018, le positionnement collant pour les éléments head est largement pris en charge dans les navigateurs modernes. , grâce aux efforts de la communauté des développeurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!