테이블에 스타일을 적용할 때 보통 아래와 같은 스타일을 적용해서 제어를 한다.

table {
    table-layout: fixed;
    border-collapse: collapse;
}

이렇게 해야 셀의 너비를 원하는 대로 지정할 수 있고 셀에 선을 넣었을 때도 끊어지지 않고 붙어서 나오게 된다.

최근에 표에 border-radius가 적용되지 않는 현상을 발견했는데 위와 같이 하면 셀 보더가 없어지다 보니 셀에 라운딩이 적용되지 않아서 그렇다고 한다.

해결책은 border-collapse는 기본값으로 두고 border-spacing: 0을 적용하면 border-radius도 적용이 되고 셀 간격도 없어지게 된다.

table {
    table-layout: fixed;
    border-spacing: 0;
}