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

부모 컨테이너가 넘쳐 흐르는 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)를 사용할 수도 있습니다.



답변

순전히 “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;
}


답변