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


136

부모 컨테이너가 넘쳐 흐르는 html 테이블에 문제가 있습니다.

.page {
    width: 280px;
    border:solid 1px blue;
}

.my-table {
    word-wrap: break-word; 
}

.my-table td {
    border:solid 1px #333;
}
<div class="page">
    <table class="my-table">
        <tr>
            <th>Header Text</th>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
            <th>Header Text</th>
        </tr>
        <tr>
            <td>An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – pélagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]</td>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
            <td>An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – pélagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]</td>
        </tr>
    </table>    
</div>

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

답변:


252

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

table-layout: fixed;
width: 100%;

원하는대로 열 너비를 설정하십시오. 그렇지 않으면 고정 레이아웃 알고리즘이 테이블 너비를 열에 고르게 분산시킵니다.

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

  • 고정 ( 소스 )
    이 (빠른) 알고리즘을 사용하면 테이블의 가로 레이아웃 이 셀 의 내용의존하지 않습니다 . 테이블 너비, 열 너비 및 테두리 또는 셀 간격에만 의존합니다.
  • 자동 ( 소스 )
    이 알고리즘 (일반적으로 두 번 이상 패스를 요구하지 않음)에서, 테이블의 너비는 열의 너비 [내용에 따라 결정] (및 중간 경계 )로 지정됩니다.

    [...]이 알고리즘은 최종 레이아웃을 결정하기 전에 사용자 에이전트가 테이블의 모든 컨텐츠에 액세스해야하고 둘 이상의 패스를 요구할 수 있기 때문에 비효율적 일 수 있습니다.

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


54

추가해보십시오

word-break: break-all 

테이블 요소의 CSS에.

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


10
더 좋은word-wrap: break-word;
Apolo

1
@ 아폴로-합의! 나는 원래 jsfiddle 데모에서도 사용했습니다 (위의 답변 본문에있는 링크 참조).
Jon Schneider

1
깜박임 브라우저가 word-break: break-word가장 잘 작동합니다.
Volvox September

overflow-wrap표준화되어 있기 때문에 대신 속성 을 사용하는 것이 좋습니다
Romko

18

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


필자의 경우 : 모든 부모 너비 (고해상도)에 맞는 테이블이 필요했기 때문에 테이블을 div로 묶고 스타일을 적용했습니다. 이제 테이블은 부모의 모든 너비를 사용하려고 시도하지만 테이블 내용이 넘치면 스크롤 막대가 나타납니다.
manuman94

2

에 추가하십시오 td:

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

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


1

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


당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.