테이블 테두리 둥글게(라운딩) 만드는 방법 | table with border radius css

남양주개발자

·

2021. 7. 25. 09:47

728x90
반응형

요즘 실제 웹서비스를 구현할 때 레이아웃에 테이블을 사용하진 않지만 Email HTML 템플릿 코딩을 하다보면 테이블 태그를 꽤 많이 사용합니다. 아래 이미지와 같이 테이블 테두리를 라운딩 처리를 하기 위해 border radius 속성값을 부여했을 때 제대로 동작하지 않는 경우가 생깁니다.

table with border radius css, Border Radius of Table is not working

해결방법

만약 테이블 태그에 해당 이슈가 발생했다면 border-collapse: collapse; 속성 때문일 것입니다.

<table style="border-collapse: collapse; border-radius: 8px;">
....
</table>

border-collapse: separate (기본값)으로 설정하면 정상적으로 border radius 속성을 적용할 수 있습니다.

728x90
반응형
그리드형

이 포스팅은 쿠팡파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

💖 저자에게 암호화폐로 후원하기 💖

아이콘을 클릭하면 지갑 주소가자동으로 복사됩니다