끈적 끈적한 헤더와 바닥 글로 테이블을 만드는 것이 조금 쉬워졌습니다.-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" */
}

로그인 후 복사

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

로그인 후 복사

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:

위 내용은 끈적 끈적한 헤더와 바닥 글로 테이블을 만드는 것이 조금 쉬워졌습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

이전 기사：WordPress 블록 필터의 충돌 코스 다음 기사：html에서 사용되지 않은 클래스를 감지하십시오

본 웹사이트의 성명

최신 이슈

Safari 14.1은 Flexbox 갭에 대한 지원을 추가합니다

2025-03-24 10:45:15
비활성화 버튼을 더 포괄적입니다

2025-03-24 10:39:14
특이성에 대해 이야기하기 위해 (X, X, X, X)를 사용해 보겠습니다.

2025-03-24 10:37:12
일부 타이포그래피 링크 IV

2025-03-24 10:36:15
Svgator 3.0은 광범위한 새로운 기능으로 SVG를 만드는 방식과 애니메이션을 재구성합니다.

2025-03-24 10:34:13