Table

테이블 스타일링

border-collapse

표 테두리 스타일

/* 인접한 테두리 분리 - 기본 스타일 */
border-collapse: sperate;

/* 인접한 테두리 병합 */
border-collapse: collapse;

border-spacing

셀 사이의 간격

border-spacing: 0;

실선 만들기

산 사이의 여백을 없애준다

border-collapse: collapse;
border-spacing: 0;

table-layout

/* 기본값 - 컨텐츠에 따라 열 크기 조정 */
table-layout: auto
/* 너비 지정 */
table-layout: fixed;

테이블 셀 스타일링

텍스트 가로 정렬

left, center, right

td {
	text-align: center;
}

텍스트 세로 정렬

top, middle, bottom

td {
	vertical-align: middle;
}

empty-cells

내용 없는 셀의 테두리와 배경 표시 여부

empty-cells: show; /* 기본 스타일 */
empty-cells: hide;

테이블에 스크롤 만들기

inline-size: 100%

Sticky

스크롤을 해도 해당 요소가 붙어서 따라오게 하는 포지션 속성
부모 컨테이너 안에서만 적용되며 부모태그에 높이가 있어야한다.

position: sticky;

z-index

나중에 마크업 된 요소를 앞으로 보내거나 뒤로 보내기
기본값 : 0

/* 맨 앞으로 */
z-index: -1; 
/* 맨 뒤로 */
z-index: 1;