Maison > Article > interface Web > Les en-têtes collants peuvent-ils être utilisés dans les divisions défilantes pour les en-têtes de tableau ?
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 : Prérequis : Exemple de balisage de tableau : Options supplémentaires : 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!<code class="css">thead th { position: sticky; top: 0; }</code>
éléments.
<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>
<code class="css">thead tr:first-child th { position: sticky; top: 0; }</code>
Articles Liés
Voir plus