테이블에 border-radius가 적용되지 않을 때
dev | 2022-10-15
테이블을 스타일링 할 때에는 보통 먼저 너비를 고정하고 셀의 간격을 없애는 스타일을 적용하고 시작한다. 이렇게 해야 셀의 너비가 내용물에 따라 변하지 않고 셀에 선을 넣었을 때도 끊어지지 않게 나온다.
table {
table-layout: fixed;
border-collapse: collapse;
}
최근에 표에 border-radius
가 적용되지 않는 현상을 발견했는데 위와 같이 하면 셀 보더가 없어져서 라운딩이 적용되지 않는다고 한다.
border-collapse
는 기본값으로 두고 border-spacing: 0
을 적용하면 border-radius
도 적용이 되고 셀 간격도 없어지게 된다.
table {
table-layout: fixed;
border-spacing: 0;
}
Comments