04/08 HTML/CSS table 스타일링

 

 

 

table 스타일링

테이블에서 콘텐츠가 많을 경우에 선을 넘는 것  처리하기

 

 

 

 

컨텐츠가 길때, 스페이스가 있으면 그 단위로 줄을 바꿔준다

 

 

 

 

 

 

 

 

넘는 것은 숨기고 ... 으로 나오게 해주었다

 

 

 

 

 

 

 속성은 한번에 모아서 정리해보자

페이지마다 테이블이 다 있기 때문에 통일해보기

 

 

 

 

 

 

 

table로 묶어주어서 다른 페이지 만들때도 쉽게 사용할 수 있을 것

 

 

 

 

 

 

 

테이블 헤드 만들기

 

 

 

테이블 안에 것들을 가운데로 정렬

 

 

 

 

하지만 제목 안의 truncate 부분은 왼쪽정렬해야 한다

 

 

 

 

 

important 해주어 우선순위 높게 해 덮어준다

 

 

 

 

 

 

 

tr과 table 사이에는 반드시 tbody  라는 태그가 있어야 한다 -> 안 썼다면 브라우저가 자동생성해줌

 

 

 

 

테이블헤드와 바디를 나눔

 

 

 

헤드의 tr에만 색넣어주기