Membuat meja dengan header dan footer melekit sedikit lebih mudah-tutorial 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" */
}

Salin selepas log masuk

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

Salin selepas log masuk

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:

Atas ialah kandungan terperinci Membuat meja dengan header dan footer melekit sedikit lebih mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel sebelumnya：Kursus Kemalangan di Penapis Blok WordPress Artikel seterusnya：Mengesan kelas yang tidak digunakan di ... html

Kenyataan Laman Web ini

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

Isu terkini

Safari 14.1 menambah sokongan untuk jurang flexbox

2025-03-24 10:45:15
Membuat butang kurang upaya lebih inklusif

2025-03-24 10:39:14
Mari kita gunakan (x, x, x, x) untuk bercakap mengenai kekhususan

2025-03-24 10:37:12
Beberapa pautan tipografi iv

2025-03-24 10:36:15
SVGator 3.0 membentuk semula cara anda membuat dan menghidupkan SVG dengan ciri -ciri baru yang luas

2025-03-24 10:34:13

Topik-topik yang berkaitan

Lagi>

Cadangan popular

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini

Muat turun terkini

Lagi>

kesan web

Kod sumber laman web

Bahan laman web

Templat hujung hadapan

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