[웹] HTML 테이블에서 내용 변경과 관계없이 셀 크기를 고정하는 방법

HTML의 "<table>" 요소는 기본적으로 셀 내부의 내용 크기에 따라 레이아웃이 자동으로 조정 됩니다.이러한 특성은 간단한 표를 구성할 때는 편리하지만, 데이터의 길이가 수시로 변하는 관리 화면이나 로그 테이블과 같은 화면에서는 레이아웃이 흔들리는 원인 이 되기도 합니다.

이번 글에서는 테이블 내부의 내용이 변경되더라도 "tr", "td"의 크기를 고정하는 방법을 CSS 기준으로 알아 보도록 하겠습니다.

---

"table-layout: fixed" 설정의 중요성

테이블 레이아웃을 고정하기 위해 가장 먼저 적용해야 할 것은 "

" 요소 style 속성의 "table-layout" 입니다.

table {
    table-layout: fixed;
    width: 600px;
    border-collapse: collapse;
}

"table-layout" 기본값인 "auto" 방식으로 동작하여 내용 길이에 따라 셀 크기가 계속 변경됩니다.
이를 "table-layout: fixed"를 적용하면, 브라우저는 셀의 실제 내용이 아닌 테이블 전체 너비와 열 너비를 기준으로 레이아웃을 계산하게 됩니다.
따라서 이 속성을 사용할 때는 반드시 테이블 전체의 "width"를 함께 지정해야 정상적으로 동작합니다.

---

"td", "th" 요소에 고정 크기 지정하기

테이블 레이아웃이 고정되었다면, 각 셀의 크기를 명시적으로 지정할 수 있습니다.

td, th {
    width: 150px;
    height: 40px;
    border: 1px solid #ccc;
}

이렇게 설정하면 셀 내부의 내용이 길어지더라도 지정한 크기를 유지하게 됩니다.

---

셀 내부 내용이 넘칠 때의 처리 방법

셀 크기를 고정하면, 텍스트가 셀 영역을 넘치는 경우가 발생할 수 있습니다.
이를 방지하기 위해 "overflow" 관련 속성을 함께 설정하는 것이 중요합니다.

말줄임표("...") 처리 ; ellipsis

td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

가장 일반적으로 사용되는 방식으로, 한 줄로 제한하고 넘치는 텍스트는 말줄임표로 표시합니다.

단순 숨김 처리 ; hidden

td {
    white-space: nowrap;
    overflow: hidden;
}

스크롤 표시 ; auto

td {
    overflow: auto;
}

셀 내부에 스크롤을 표시하여 전체 내용을 확인할 수 있도록 할 수도 있습니다.

---

"tr" 높이 고정 시 주의사항

HTML 테이블에서 "tr"의 높이는 직접적으로 제어되지 않으며, 내부에 포함된 "td"의 높이에 의해 결정됩니다.
따라서 행 높이를 고정하고자 할 경우, "tr"이 아닌 "td"에 "height"를 지정하는 것이 바람직합니다.

td {
    height: 40px;
    vertical-align: middle;
}

---

예제 코드

아래는 실무에서 가장 안정적으로 사용 가능한 구성 예시입니다.

<table class="fixed-table">
    <tr>
        <td>짧은 텍스트</td>
        <td>아주 아주 긴 텍스트가 들어가더라도 셀 크기는 변하지 않습니다</td>
    </tr>
</table>

.fixed-table {
    table-layout: fixed;
    width: 400px;
    border-collapse: collapse;
}

.fixed-table td {
    width: 200px;
    height: 40px;
    border: 1px solid #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

---

맺는말

테이블 레이아웃을 안정적으로 고정하기 위한 핵심 요소는 다음과 같습니다.

• "table-layout: fixed" 적용
• 테이블 전체 "width" 명시
• "td" / "th"에 명확한 크기 지정
• "overflow" 처리로 내용 초과 대응

자주 발생하는 문제들을 원인을 확인해 보면 다음과 같습니다.

• 셀 크기가 계속 변경됨 → "table-layout: auto" 사용 / "table-layout: fixed" 적용하였으나, 테이블에 대한 "width" 미지정
• "width"가 적용되지 않음 → 테이블 전체 너비(width) 미지정
• "tr" 높이가 고정되지 않음 → "td"에 height 미지정
• 텍스트가 셀 밖으로 넘침 → overflow 처리 미지정

위 원칙을 적용하면 데이터 길이에 관계없이 레이아웃이 흔들리지 않는 테이블 UI 를 구현할 수 있습니다.
관리 화면이나 데이터 중심 UI를 구성하실 때 참고하셔서 도움이 되었으면 좋겠습니다.