폭 100% 테이블 넘침 디브용기

폭 100% 테이블 넘침 디브용기

이 질문에는 이미 다음과 같은 답변이 있습니다.

div 이외의 테이블 오버플로 (12개 답변)

닫힘2년 전에.

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 전용 방법을 선호하지만, 꼭 필요하다면 자바스크립트(또는 jQuery)를 사용할 수도 있습니다.

순수하게 "div에서 적합하게 만들기" 관점에서 테이블 클래스(jsfiddle)에 다음을 추가합니다.

table-layout: fixed;
width: 100%;

원하는 대로 열 너비를 설정합니다. 그렇지 않으면 고정 레이아웃 알고리즘이 열에 테이블 너비를 균등하게 분배합니다.

빠른 참조를 위해 테이블 레이아웃 알고리즘을 소개합니다. 강조할 사항은 다음과 같습니다.

• 고정 (출처)

  이 (빠른) 알고리즘을 사용하면, 테이블의 수평 레이아웃셀의 내용에 의존하지 않으며 테이블의 너비, 열의 너비, 테두리 또는 셀 간격에만 의존합니다.

• 자동 (출처)

  (일반적으로 두 번 이상의 패스를 필요로 하지 않는) 이 알고리즘에서 표의 너비는 열의 너비에 따라 결정됩니다.[, 내용에 따라 결정됨] (그리고 개입)경계).
  
  [...] 이 알고리즘은 최종 레이아웃을 결정하기 전에 사용자 에이전트가 테이블의 모든 컨텐츠에 액세스해야 하고 하나 이상의 패스를 요구할 수 있기 때문에 비효율적일 수 있습니다.

소스 설명서를 클릭하면 각 알고리즘에 대한 세부 정보를 볼 수 있습니다.

추가해 보기

word-break: break-all 

테이블 요소의 CSS로 이동합니다.

그러면 테이블 셀의 단어가 깨져서 테이블이 포함된 div보다 더 넓어지지는 않지만 테이블 열은 여전히 동적으로 크기가 지정됩니다. jsfiddle demo.

더하다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

overflowed tds는 새 행에 정렬됩니다.

음, 당신의 제약 조건을 고려할 때, 제 생각엔overflow: scroll;.page일 거예요. div입니다 글자 280px다.어떤 단어들은 단지 길고 포장할 수 없습니다.글꼴 크기를 대폭 줄이거나 overflow: 스크롤로 이동할 수 있습니다.

CSS를 다음으로 업데이트합니다. 이것은 고쳐질 것입니다.

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

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