table에 border-radius 적용하기(table 테두리 둥글게 만들기)

table 테두리를 둥글게 만들고 싶어서 table에 border-radius를 적용했는데 radius가 적용이 되지 않았다.

알고보니 border-collapse: collapse; 속성 때문에 서로 충돌이 일어나 border-radius가 적용이 되지 않았던 것이다.

 

table에 border-radius 적용하는 방법

 

1. table을 div로 한번 깜싸기
2. div에 border-radius와 overflow: hidden; 추가

<div class="table07-wrap">
    <table class="table07">
        <caption class="hidden">테이블-07</caption>
        <colgroup>
            <col span="1" style="width: 20%">
            <col span="1" style="width: 30%">
            <col span="1">
        </colgroup>
        <thead>
            <tr class="background-gray">
                <th scope="col">약정기간</th>
                <th scope="col">이용기간</th>
                <th scope="col">할인반환금</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="rowgroup" rowspan="2" class="background-gray">1년 약정</th>
                <td>3개월 이하</td>
                <td>누적 할인액 X 100%</td>
            </tr>
            <tr>
                <td>4개월 이상</td>
                <td>누적 할인액 X {잔여약정일수 / (약정기간 - 90일)}</td>
            </tr>
            <tr>
                <th scope="rowgroup" rowspan="2" class="background-gray">2년 약정</th>
                <td>6개월 이하</td>
                <td>누적 할인액 X 100%</td>
            </tr>
            <tr>
                <td>7개월 이상</td>
                <td>누적 할인액 X {잔여약정일수 / (약정기간 - 180일)}</td>
            </tr>
        </tbody>
    </table>
</div>

.table07-wrap {
    overflow: hidden;
    width: 1300px;
    height: auto;
    margin: 0 auto;
    border: 1px solid #e2e2e2;
    border-radius: 15px;
    
}​