HTML 테이블에서 열 너비 설정하기

작은 일회성 테이블에는 <th style="width: 15%">ID</th> 같은 인라인 선언이면 충분합니다. 재사용 가능한 컴포넌트에서는 스타일시트나 <colgroup>을 사용하여 데이터 셀을 포함한 열 전체에 규칙을 적용하세요.

<style>
.people {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.people th,
.people td {
  border: 1px solid black;
  overflow-wrap: anywhere;
}

.people .id-column { width: 15%; }
.people .name-column { width: 70%; }
.people .age-column { width: 15%; }
</style>
<table class="people">
  <colgroup>
    <col class="id-column">
    <col class="name-column">
    <col class="age-column">
  </colgroup>
  <thead>
    <tr><th scope="col">ID</th><th scope="col">Name</th><th scope="col">Age</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>John</td><td>25</td></tr>
    <tr><td>2</td><td>Jackson</td><td>40</td></tr>
  </tbody>
</table>

세 백분율의 합은 100%이므로 테이블의 초기 배분이 분명합니다. Name은 ID와 Age보다 넓습니다. table-layout: fixed는 각 행의 가장 긴 셀이 아니라 테이블 너비, 명시적 열 너비, 첫 번째 행을 중심으로 크기를 정합니다. overflow-wrap: anywhere는 비정상적으로 긴 값이 테이블을 넓히지 않고 줄바꿈되게 합니다.

<colgroup>은 테이블의 행 그룹보다 앞에 있어야 합니다. <col>은 보이는 셀이 아니라 열을 나타내며 자체 내용이 없습니다. 연속된 열이 같은 규칙을 공유하면 <col>에 span을 사용하세요. col 요소에는 자체 내용이 없다는 점에 유의하세요. 이 방식은 HTML의 의미 구조도 유지합니다. 제목에는 <th>와 scope="col"을 사용하면 보조 기술이 제목과 셀을 연결할 수 있습니다.

클래스와 :nth-child() 비교하기

.people th:nth-child(1) { width: 15%; }, .people th:nth-child(2) { width: 70%; }, .people th:nth-child(3) { width: 15%; } 같은 선택자로 첫 번째 행의 너비를 설정할 수 있습니다. 모든 제목에 클래스를 추가하지 않고 기존 클래스 방식과 :nth-child() 기법을 유지합니다. 열의 의미가 중요하면 클래스가 더 명확하고, 열 순서가 단순하고 안정적이면 :nth-child()가 편리합니다.

행에 colspan이 있거나 제목 행의 구조가 다르거나 열 순서를 바꿀 수 있다면 :nth-child()에 의존하지 마세요. 이런 경우 <colgroup>이나 이름 있는 클래스로 열의 대응을 명확히 하세요. 일부 너비만 지정하면 브라우저가 남은 공간을 배분하므로 자동 레이아웃에서 지정하지 않은 열이 항상 정확한 백분율을 받는다고 가정하지 마세요.

맞지 않는 콘텐츠 처리하기

고정 레이아웃은 좁은 열을 모든 값을 담을 만큼 넓게 만들지는 않습니다. 줄바꿈할 수 없는 긴 URL이나 식별자는 넘칠 수 있습니다. 다음 경계 예제는 너비 규칙을 유지하면서 페이지 레이아웃을 바꾸지 않고 셀을 가로로 스크롤하게 합니다.

<style>
  .compact {
    table-layout: fixed;
    width: 320px;
  }
  .compact th,
  .compact td {
    max-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  .compact td.code {
    overflow-x: auto;
    white-space: nowrap;
  }
</style>
<table class="compact">
  <colgroup><col style="width: 25%"><col style="width: 75%"></colgroup>
  <tr><th scope="col">Type</th><th scope="col">Value</th></tr>
  <tr><td>URL</td><td class="code">https://example.com/a-very-long-value-without-spaces</td></tr>
</table>

일반 문장에서는 가로 스크롤보다 줄바꿈이 보통 더 좋습니다. 실제적인 내용과 좁은 뷰포트 너비에서 테이블을 테스트하세요. 너비는 테이블 레이아웃 알고리즘이 해석하는 힌트이지 모든 셀이 정확한 픽셀 크기를 유지한다는 보장은 아닙니다.