테이블 — table-layout:fixed 오버플로 문제 완전 정리

 

 

Web Development · HTML Table

테이블 — table-layout:fixed로
너비 강제하기 (오버플로 문제)

긴 텍스트가 셀 너비를 무시하고 튀어나오는 현상

시작 오늘 분석할 코드

table-layout: fixed를 쓰면 셀 너비를 강제 고정할 수 있다. 하지만 띄어쓰기 없는 긴 텍스트가 들어가면 셀을 뚫고 옆으로 튀어나가는 문제가 생긴다 — 이 코드의 학습 포인트.

table { width: 300px; table-layout: fixed; /* 너비 강제 모드 */ } td { width: 150px; } <td>한글로띄어쓰기없기길게붙여쓰기</td> <td>long_description_without_space</td>

실제 출력 미리보기 (텍스트가 튀어나오는 현상)

한글로띄어쓰기없기길게붙여쓰기

long_description_without_space

※ width:150px이지만 띄어쓰기 없는 텍스트가 셀을 무시하고 옆으로 튀어나간다. 이게 table-layout:fixed의 한계다. 다음 예제(table-layout2)에서 word-break로 해결한다.

용어 용어 정리

table-layout테이블 너비 계산 알고리즘 선택

auto (기본)콘텐츠에 맞춰 셀 너비 자동 조정

fixed첫 행의 너비 또는 col 지정 너비로 고정

오버플로콘텐츠가 박스를 뚫고 나오는 현상

word-break긴 단어를 강제로 줄바꿈하는 속성

overflow-wrapword-break의 다른 이름 (모던 표준)

---

1 table-layout: auto vs fixed

auto (기본)

• 모든 셀 콘텐츠를 본 후 너비 결정
• 긴 텍스트가 있는 컬럼이 자동으로 넓어짐
• 큰 표에서 느림 (모든 셀 검사)

fixed

• 첫 행 또는 colgroup 너비로 결정
• 나머지 행 콘텐츠는 너비 계산에 영향 없음
• 매우 빠름, 대용량 표에 권장

---

2 왜 텍스트가 튀어나오나?

HTML은 기본적으로 띄어쓰기·하이픈에서만 줄바꿈한다. 한국어처럼 띄어쓰기 없는 긴 단어나 영어의 긴 식별자(long_description_without_space)는 줄바꿈 지점을 못 찾아서 셀을 뚫고 나간다.

"이것은 줄바꿈 됩니다" ↑ ↑ 띄어쓰기 = 줄바꿈 가능 지점 "이것은줄바꿈안됩니다" ↑ 줄바꿈 지점 없음 → 한 덩어리로 옆으로 흐름 table-layout: fixed + 줄바꿈 안 됨 = 셀 밖으로 튀어나감

---

3 해결 방법 미리보기

다음 예제(table-layout2)에서 본격적으로 다룰 두 가지 해결 속성:

속성	동작
word-break: break-all	어디서든 줄바꿈 — 단어 중간이라도
overflow-wrap: anywhere	박스를 넘기 전이면 어디서든 줄바꿈
overflow: hidden	튀어나간 부분 잘라냄 (텍스트 유실)
text-overflow: ellipsis	잘린 부분에 "…" 표시

반응형

---

4 table-layout: fixed가 빠른 이유

auto는 모든 셀 내용을 다 읽은 뒤에야 컬럼 너비를 결정할 수 있다. 그래서 행이 1만 개면 1만 개를 다 검사해야 한다. fixed는 첫 행만 보고 결정하므로 즉시 그릴 수 있다.

※ 큰 데이터 표는 fixed 권장

• 1000행 이상 표면 auto는 눈에 띄게 느려짐
• fixed + 명시적 width로 성능 + 일관된 너비 동시 확보
• 가상 스크롤 라이브러리도 대부분 fixed 전제로 동작

---

5 자주 하는 실수

실수	증상	해결
fixed + 줄바꿈 처리 누락	긴 텍스트가 셀 밖으로	word-break: break-all
fixed인데 첫 행 너비 안 줌	모든 셀이 균등 분할	td/col에 명시적 width
표 width 안 줌	fixed인데 표가 좁아짐	table에 width 필수
colgroup 안 씀	각 td마다 width 적어 번거로움	colgroup + col로 컬럼별 너비 한 번에

---

핵심 한 줄 요약

table-layout: fixed첫 행 기준 너비 고정 — 빠르고 일관적

한계띄어쓰기 없는 긴 텍스트가 셀 밖으로 튀어나감

해결word-break: break-all 또는 overflow-wrap

vs autoauto는 콘텐츠 기반 / fixed는 선언 기반

큰 표는 fixed행 많을수록 fixed가 압도적으로 빠름

Tags

#table-layout #fixed #auto #width #테이블너비 #오버플로 #overflow-x #가로스크롤 #셀너비고정 #word-break #CSS테이블 #큰표최적화 #박스모델 #웹개발 #HTML #티스토리

▼ 티스토리 태그 입력란 복사용

table-layout, fixed, auto, width, 테이블너비, 오버플로, overflow-x, 가로스크롤, 셀너비고정, word-break, CSS테이블, 큰표최적화, 박스모델, 웹개발, HTML, 티스토리