table 기본 셋팅/border-spacing/border-collapse

table를 그냥 만들면 칸마다 공간이 생긴다. 이를 없애기 위해 기본으로 넣어두는 값이 있다.

 

결과

바로 아래 두가지 이다.

            border-spacing: 0;

            border-collapse: collapse;

 

 

html

    <table class="table">
        <thead class="thead">
            <tr class="tr">
                <th class="th">제목</th>
                <th class="th">제목</th>
                <th class="th">제목</th>
                <th class="th" colspan="2">가로 합친 제목</th>
            </tr>
            <tr class="tr">
                <td class="td" rowspan="2">세로<br> 합친<br> 내용</td>
                <td class="td">내용</td>
                <td class="td">내용</td>
                <td class="td" colspan="2">가로 합친 내용</td>
            </tr>
            <tr class="tr">
                <td class="td">내용</td>
                <td class="td">내용</td>
                <td class="td">내용</td>
                <td class="td">내용</td>
            </tr>
        </thead>
    </table>

 

css

        .table {
            border-spacing: 0; 
            border-collapse: collapse;
        }
        .th,
        .td {
            padding: 5px;
            border: solid 1px #000;
            text-align: center;
            font-weight: 400;
        }

 

결과

결과

 

border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 결정

border-spacing으로 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 정함