CSS table-layout: fixed의 특징

table-layout의 기본값 auto는 모든 셀의 내용을 확인한 뒤 열 너비를 정한다. 반면 fixed는 내용을 보지 않고 미리 정해진 너비로 열을 나눈다.

table {
  table-layout: fixed;
  width: 100%; /* fixed가 동작하려면 테이블 너비가 지정되어 있어야 함 */
}

특징

• 열 너비는 <col> 또는 첫 번째 행의 셀 너비로 결정된다. 너비를 지정하지 않은 열은 남은 공간을 똑같이 나눠 갖는다. 이후 행의 내용이 길어도 열 너비는 바뀌지 않는다.
• 렌더링이 빠르다. 첫 행만 보고 레이아웃을 확정할 수 있어, 행이 많은 테이블에서 전체 내용을 다 읽기 전에 그리기 시작할 수 있다.
• 넘치는 내용은 직접 처리해야 한다. 셀이 내용에 맞춰 늘어나지 않으므로 긴 텍스트는 셀 밖으로 넘친다.

td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 한 줄 말줄임 */
}

/* 또는 줄바꿈 */
td {
  overflow-wrap: anywhere;
}

언제 쓰나

• 열 너비가 데이터에 따라 들쭉날쭉 바뀌면 안 되는 표(관리자 목록, 정렬·페이지 이동이 잦은 표)
• 행이 많아 레이아웃 계산 비용을 줄이고 싶을 때
• 말줄임(text-overflow: ellipsis)을 셀에 적용하고 싶을 때. auto 레이아웃에서는 셀이 내용만큼 늘어나 말줄임이 잘 동작하지 않는다.