728x90
반응형
요즘 실제 웹서비스를 구현할 때 레이아웃에 테이블을 사용하진 않지만 Email HTML 템플릿 코딩을 하다보면 테이블 태그를 꽤 많이 사용합니다. 아래 이미지와 같이 테이블 테두리를 라운딩 처리를 하기 위해 border radius 속성값을 부여했을 때 제대로 동작하지 않는 경우가 생깁니다.
해결방법
만약 테이블 태그에 해당 이슈가 발생했다면 border-collapse: collapse; 속성 때문일 것입니다.
<table style="border-collapse: collapse; border-radius: 8px;">
....
</table>border-collapse: separate (기본값)으로 설정하면 정상적으로 border radius 속성을 적용할 수 있습니다.
728x90
반응형
그리드형
'개발 > CSS3' 카테고리의 다른 글
| [CSS] :not() 선택자(selector) 초간단 사용방법 (1) | 2021.02.09 |
|---|---|
| CSS에서 텍스트 ellipsis('...') 말줄임 표시 처리하는 방법 (2줄, 3줄) (0) | 2021.01.25 |
| CSS width height 같게 반응형 정사각형 만드는 방법 (CSS width height same) (1) | 2020.11.26 |
| overscroll-behavior 속성을 활용해서 스크롤 체이닝 현상 막는 방법 (2) | 2020.07.28 |
| [크로스 브라우징] IE9에서 자동으로 이미지 높이값을 default size로 계산하는 경우 (0) | 2020.02.16 |
이 포스팅은 쿠팡파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
