테이블에 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

Post a comment

:

: 공개 되지 않습니다. Gravatar를 표시 합니다.

:

: HTML 태그를 사용할 수 없습니다.