[HTML/CSS] 테이블 thead에 border-radius 들어간 CSS 적용하기

테이블에 border-radius가 들어간 디자인 시안을 받으면 아주 킹받습니다.

테이블에는 CSS 적용에 제한이 있기때문이죠

 

대충 예를 들면 아래와 같은 디자인은 보기에 아주 쉬워보이지만 THEAD에는 border-radius가 적용되지 않아 좀  번거롭습니다.

 

thead에 border-radius값을 주면

이렇게 아무런 변화가 없습니다.

 

 

table 태그 자체에 border-radius를 주게 되면 이렇게 말그대로 테이블 전체가 둥글어집니다.

thead에만 border-radius 디자인을 적용하려면, 가상요소 속성을 사용하는 방법이 있습니다.

See the Pen round thead by nah (@wimmwell) on CodePen.

정리하면 thead에 position:relative; 를 주고

thead::before에 position:absolute와 함께 필요한 css를 적용