Faire des tables avec une en-tête et des pieds de page collants est devenu un peu plus facile-tutoriel CSS-php.cn

Making Tables With Sticky Header and Footers Got a Bit Easier

It wasn’t long ago when I looked at sticky headers and footers in HTML

s in the blog post A table with both a sticky header and a sticky firstcolumn. In it, I never used position: sticky on any , , or element, because even though Safari and Firefox could do that, Chrome could not. But it could do table cells like and are sticky-able. That seems like it will be the most common use case here.

table thead,
table tfoot {
  position: sticky;
}
table thead {
  inset-block-start: 0; /* "top" */
}
table tfoot {
  inset-block-end: 0; /* "bottom" */
}

Copier après la connexion

That works in all three major browsers. You might want to get clever and only sticky them at certain minimum viewport heights or something, but the point is it works.

I heard several questions about table columns as well. My original article had a sticky first column (that was kind of the point). While there is a table

tag, it’s… weird. It doesn’t actually wrap columns, it’s more like a pointer thing to be able to style down the column if you need to. I hardly ever see it used, but it’s there. Anyway, you totally can’t position: sticky; a , but you can make sticky columns. You need to select all the cells in that column and stick them to the left or right. Here’s that using logical properties…

table tr th:first-child {
  position: sticky;
  inset-inline-start: 0; /* "left" */
}

Copier après la connexion

Here’s a sorta obnoxious table where the

, , and the first and last columns are all sticky.

I’m sure you could do something tasteful with this. Like maybe:

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!

Article précédent：Un cours intensif dans les filtres de blocs WordPress Article suivant：Détecter les classes inutilisées dans ... HTML

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers numéros

Safari 14.1 ajoute la prise en charge des lacunes Flexbox

2025-03-24 10:45:15
Rendre les boutons désactivés plus inclusifs

2025-03-24 10:39:14
Utilisons (x, x, x, x) pour parler de spécificité

2025-03-24 10:37:12
Quelques liens de typographie IV

2025-03-24 10:36:15
SVGATOR 3.0 remodeler la façon dont vous créez et animez SVG avec de nouvelles fonctionnalités étendues

2025-03-24 10:34:13

Rubriques connexes

Plus>

Recommandations populaires

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal

and	, which was a decent-enough workaround. Well that’s changed. Sounds like a big effort went into totally revamping tables in the rendering engine in Chromium, bringing tables up to speed. It’s not just the stickiness that was fixed, but all sorts of things. I’ll just focus on the sticky thing since that’s what I looked at. The headline to me is that

and

, which was a decent-enough workaround.

Well that’s changed.

Sounds like a big effort went into totally revamping tables in the rendering engine in Chromium, bringing tables up to speed. It’s not just the stickiness that was fixed, but all sorts of things. I’ll just focus on the sticky thing since that’s what I looked at.

The headline to me is that