antd 테이블 헤더 색상 변경하기

 

antd 테이블 컴포넌트를 사용하게 되면서 테이블 헤더를 내가 원하는 방식으로 바꾸고 싶었다.

 

 

현재 내가 기본 table을 가져다 썼더니, 이런 식으로 디자인이 되어있었는데

 

 

 

나는 테이블 헤더를, top 과 bottom 만 border를 주는 방식으로 디자인을 하고 싶었다.

 

설계해뒀던 프로토타입

 

---

antd table 헤더 디자인 변경하는 방법

 

먼저 css 파일을 만들어서

 

 

.ant-table-cell  { } 안에 원하는 설정을 해주면 된다.

 

나는 radius 없애고, background color를 흰색으로 한 뒤, 

top 과 bottom 에만 border 를 설정하여 색을 바꿔줬다.

.ant-table
  .ant-table-container
  .ant-table-content
  table
  thead.ant-table-thead
  .ant-table-cell {
      // 이 안에 css 설정
}

 

---

 

그렇게 설정해줬더니,

 

 

내가 설계했던 프로토타입 대로 디자인이 바뀌었다.