표(table) 크기 고정시키기

CSS

작성일 2026-10-27 최근 수정일 2026-10-27

table-layout: fixed는 표의 가로 열 배치를 내용 길이보다 지정한 너비를 기준으로 결정하게 합니다. 표에 width도 함께 지정해야 의도한 고정 배치를 사용할 수 있으며, 긴 내용의 줄바꿈이나 잘라내기는 별도로 정해야 합니다. 표의 높이까지 고정하는 속성은 아닙니다.

width만 지정했는데 표가 커지는 이유

기본값인 table-layout: auto에서는 셀의 내용이 열 너비 계산에 영향을 줍니다. 공백 없이 긴 문자열, 큰 이미지 또는 white-space: nowrap으로 줄바꿈을 금지한 내용이 있으면 width: 500px를 주어도 표가 그보다 넓어질 수 있습니다. 따라서 width를 내용과 무관한 상한선으로 생각하면 안 됩니다.

고정 배치는 먼저 <col>에 지정한 열 너비를 사용하고, 그다음 첫 행 셀의 너비를 참고하며, 남은 공간을 나머지 열에 배분합니다. 뒤쪽 행의 긴 문자열 때문에 열의 폭이 다시 결정되는 방식과 다릅니다. 열 너비 합계나 테두리·셀 간격이 지정한 표 너비보다 크면 표가 커질 수 있으므로, fixed를 모든 상황에서 강제로 크기를 제한하는 설정으로 이해하지 마세요.

전체 예제: 자동 배치와 고정 배치 비교

아래 코드를 table-layout.html로 저장한 뒤 브라우저에서 엽니다. 두 표에는 동일한 파일 이름과 width를 사용합니다. 첫 표는 자동 배치이고, 두 번째 표는 고정 배치와 말줄임표를 적용했습니다. 좁은 화면에서는 바깥 상자의 가로 스크롤로 표를 확인할 수 있습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>표 너비와 열 배치 비교</title>
  <style>
    body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
.jb-table-scroll { overflow-x: auto; margin-bottom: 24px; }
    table { width: 500px; border-collapse: collapse; }
    th, td { border: 1px solid #8a9bad; padding: 8px; text-align: left; }
    th { background: #edf3fa; }
    td { white-space: nowrap; }
    .fixed { table-layout: fixed; }
    .fixed th:first-child { width: 120px; }
    .fixed td { overflow: hidden; text-overflow: ellipsis; }
  </style>
</head>
<body>
<h1>표 너비와 긴 내용</h1>
<div class="jb-table-scroll">
  <table class="jb-table-01 auto">
    <caption>auto: 내용에 따라 확장</caption>
    <thead><tr><th scope="col">구분</th><th scope="col">파일 이름</th></tr></thead>
    <tbody><tr><td>문서</td><td>quarterly-report-for-the-international-development-team.pdf</td></tr></tbody>
  </table>
</div>
<div class="jb-table-scroll">
  <table class="jb-table-01 fixed">
    <caption>fixed: 500px 안에서 배치</caption>
    <thead><tr><th scope="col">구분</th><th scope="col">파일 이름</th></tr></thead>
    <tbody><tr><td>문서</td><td>quarterly-report-for-the-international-development-team.pdf</td></tr></tbody>
  </table>
</div>
</body>
</html>

첫 번째 표는 긴 파일 이름을 한 줄에 배치하기 위해 500px보다 넓어집니다. 두 번째 표는 500px 너비 안에서 열을 배치하고, 파일 이름의 끝을 말줄임표로 표시합니다. 개발자 도구에서 각 table의 실제 너비를 비교하면 문자열이 잘리는 것과 표 자체가 커지는 것을 구분할 수 있습니다.

긴 내용을 줄바꿈하거나 말줄임표로 표시하기

파일 이름을 전부 읽어야 한다면 잘라내기보다 줄바꿈이 적합합니다. 예제의 .fixed td 규칙을 다음 코드로 교체합니다. 표의 너비는 유지되지만 긴 파일 이름이 여러 줄로 나뉘어 행의 높이가 커집니다.

.fixed td {
  white-space: normal;
  overflow-wrap: anywhere;
}

말줄임표가 필요하면 원래 예제의 white-space: nowrap, overflow: hidden, text-overflow: ellipsis 세 설정으로 되돌립니다. ellipsis만 지정한다고 글자가 자동으로 잘리지는 않습니다. 잘린 내용도 사용자가 확인할 수 있어야 하므로, 실제 서비스에서는 전체 이름을 보여 주는 상세 화면이나 펼치기 기능을 함께 제공하는 편이 좋습니다. 중요한 값을 툴팁에만 숨기지 마세요.

열 너비와 반응형 화면에서 확인할 점

첫 번째 열의 120px을 160px로 바꾸면 구분 열이 넓어지고 파일 이름 열은 좁아집니다. 비교 후 다시 120px로 되돌리세요. 여러 열의 비율을 고정하려면 colgroup에 열별 너비를 지정할 수 있지만, 표 전체 공간보다 과도하게 큰 열 너비를 합산하지 않도록 합니다.

표가 부모 너비에 맞춰 줄어들어야 한다면 예제의 table { width: 500px; }를 table { width: 100%; }로 바꿀 수 있습니다. fixed는 고정된 픽셀 너비만을 뜻하지 않습니다. 100%처럼 부모를 기준으로 결정되는 너비에서도 열 배치를 제어합니다. 반대로 숫자·날짜처럼 줄바꿈하면 읽기 어려운 데이터가 많다면 표의 최소 너비와 가로 스크롤을 유지하는 쪽이 적합할 수 있습니다.

동작 기준은 MDN의 table-layout 설명과 W3C의 고정 표 배치 알고리즘에서 확인할 수 있습니다.

CSS