Tische mit klebrigen Header und Fußzeilen zu machen, wurde etwas einfacher-CSS-Tutorial-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" */
}

Nach dem Login kopieren

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" */
}

Nach dem Login kopieren

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:

Das obige ist der detaillierte Inhalt vonTische mit klebrigen Header und Fußzeilen zu machen, wurde etwas einfacher. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Vorheriger Artikel：Ein Absturzkurs in WordPress -Blockfiltern Nächster Artikel：Erkennen Sie unbenutzte Klassen in ... HTML

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Aktuelle Ausgaben

Safari 14.1 fügt Unterstützung für Flexbox -Lücken hinzu

2025-03-24 10:45:15
Deaktivierte Schaltflächen integrativer machen

2025-03-24 10:39:14
Verwenden wir (x, x, x, x), um über Spezifität zu sprechen

2025-03-24 10:37:12
Einige Typografie -Links IV

2025-03-24 10:36:15
SVGator 3.0 fordert die Art und Weise, wie Sie SVG erstellen und animieren, mit umfangreichen neuen Funktionen um

2025-03-24 10:34:13

verwandte Themen

Mehr>

Beliebte Empfehlungen

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage

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