100 % 너비 테이블 오버플로 div 컨테이너

100 % 너비 테이블 오버플로 div 컨테이너

---

부모 컨테이너가 넘쳐 흐르는 html 테이블에 문제가 있습니다. 여기 에 문제를 설명하기 위해 샘플 jsfiddle 을 설정 했습니다 .

머리글 텍스트와 표 셀 텍스트를 모두 컨테이너에 맞게 줄 바꿈 선택해야해야합니까? CSS 전용 방법을 선호하지만 절대적으로 필요한 경우 Javascript (또는 jQuery)를 사용할 수 있습니다.

---

순전히 "div에 맞추기"관점에서 테이블 클래스 ( jsfiddle )에 다음을 추가하십시오 .

table-layout: fixed;
width: 100%;

원하는대로 열 너비를 설정하십시오. 정렬 고정 레이아웃 알고리즘이 테이블 너비를 열에 고르게 분산 개선합니다.

빠른 참조를 위해 테이블 ​​레이아웃 알고리즘은 다음과 가변적입니다.

• 고정 ( 소스 )

  이 (빠른) 알고리즘을 사용하면 테이블의 가로 레이아웃 이 셀 의 내용 에 의존하지 않습니다 . 테이블 너비, 열 너비 및 너비 또는 셀 간격에 의존합니다.

• 자동 ( 소스 )

  이 알고리즘 (일반적으로 두 번 이상 패스를 요구하지 않음)에서, 테이블의 너비는 열의 너비 [내용에 따라 결정] (및 중간 경계 )로 지정됩니다.
  
  [...]이 알고리즘은 최종 에이전트를 결정하기 전에 사용자 에이전트가 테이블의 컨텐츠에 액세스해야하고 둘 이상의 패스를 요구할 수 있기 때문에 비효율적 일 수 있습니다.

각 알고리즘의 세부 사항을 보려면 소스 문서를 클릭하십시오.

---

추가해

word-break: break-all 

테이블 요소의 CSS에.

그럼 테이블 셀의 단어가 깨져 테이블이 포함 된 div보다 넓어지지 않지만 테이블 열의 크기는 여전히 동적입니다. jsfiddle 데모 .

---

display: block;과 overflow: auto;에 추가하십시오 .my-table. 이렇게 280px하면 시행 한 한도를 초과하는 모든 항목이 차단 됩니다. pélagosthrough보다 넓은 단어로 인해 요구 사항으로 "예쁘게"보일 수있는 방법이 없습니다 280px.

---

에 추가하십시오 td:

display: -webkit-box; // to make td as block
word-break: break-word; // to make content justify

넘친 td는 새로운 행과 정렬됩니다.

---

글쎄, 당신의 제약 조건을 감안할 때 overflow: scroll;, .pagediv의 설정 은 아마도 유일한 옵션 이라고 생각합니다 . 280 px는 상당히 좁으며 글꼴 크기가 주어지면 단어 줄 바꿈만으로는 그렇게 할 수 있습니다. 일부 단어는 길고 줄 바꿈 할 수 없습니다. 글꼴 크기를 크게 줄이거 나 overflow : scroll을 사용할 수 있습니다.

---

CSS를 다음과 같이 업데이트하십시오.

.page {
    width: 280px;
    border:solid 1px blue;
    overflow-x: auto;
}

참고 URL : https://stackoverflow.com/questions/6601148/100-width-table-overflowing-div-container