it

[css] table 에 border-radius 효과주기

맛난토마토 2022. 7. 13. 14:07

운영 사이즈 개선 작업 중

table에 border-radius 효과가 안먹힌다.

테이블 기본 스타일에 간격이 생기는데 이것을 없애는 스타일 border-collapse: collapse;을 적용했을 때

border-radius가 충돌해서 border-radius 효과가 적용되지 않는다.

이 방법을 피해서 테이블 외곽에 border 효과를 주려면

table {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  border-collapse: collapse;
  border-radius: 10px;
  border-style: hidden;
  box-shadow: 0 0 0 1px #000;
}

box-shadow로 효과를 준다