최대 너비 : 100 %가 작동하지 않습니다.

Question

최대 너비 : 100 %가 여러 위치에 설정되어 있어도 페이지 너머로 확장되는 내 페이지에 gridview 테이블이 있습니다.

이

gridTable{ 
    border-top: 1px solid #dddddd; 
    border-collapse: collapse; 
    border-spacing: 0; 
    float:left; 
    table-layout: fixed; 
    max-width: 100% !important;      
} 

매우 긴 데이터가, 너무 넓은되기 위해 테이블을 유발 한 열이 다음은 테이블 내 사용자 지정 CSS는 (가 .gridTable 클래스에)입니다. 나는 숨어 오버 플로우하여 해당을 제한하는 것을 시도했다 : 심지어이 모든으로

div.gridTable tbody > tr > td:nth-last-child(2) { 
    max-width:100%; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

그러나, 내 표는 아직도 내가 그 열 긴 데이터가 페이지 너비를지나 확장합니다. 요소를 검사 할 때 모든 max-width : 100 % 스타일 제한이 있으며 테이블 클래스의 bootstrap.css 파일에서 상속 된 경우도 있지만 어떤 이유로 든 아무 것도하지 않고 있음을 알 수 있습니다. 필요에 따라 확장되어 스크롤 막대가 추가됩니다.

문제가있는 열의 너비를 고정 된 수의 픽셀로 설정하면 모든 것이 작동하지만 화면 크기에 따라 크기가 다르기 때문에 분명히 원하지 않습니다.

편집 : 이 질문에 대한 해결책은 단어를 줄 바꿈 : 구분선을 추가하여 줄 바꿈 크기를 줄이는 것이므로 this question과 같은 질문이 아닙니다. 그러나, 그것들은 다른 줄로 감싸 야합니다. 나는 줄 바꿈을 원하지 않습니다. 오버플로를 숨기고 싶습니다. 내가 현재하고있는 것처럼 오버플로를 숨기는 코드를 포함 시키면 단어 분리 : 단어 분리 부호가 아무 것도 변경하지 않습니다.

편집 2 : 나는 DataTable을 DT에서 내 테이블을 정의하고, 뒤에있는 코드의 데이터를 결합하고 있습니다 :이 수 생각

<div class="gridTable"> 
    <asp:GridView runat="server" ID="GridView1" > 
</asp:GridView></div> 

Answer 1

다음은 Chrome, Firefox, Edge, IE11에서 성공적으로 테스트 한 트릭입니다.

table-layout: fixed을 삭제하고 너비를 1px로 설정하면 첫 번째 열의 내용이 크기가됩니다.

div를 두 번째 열에 추가하면 너비가 1px가되며 오버플로가 보이고 그 너비가 테이블 너비를 초과하지 않습니다.

Fiddle demo

.gridTable { 
 
    border-collapse: collapse; 
 
    width: 80%; 
 
} 
 
.gridTable td { 
 
    border: red solid 1px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 
.gridTable td:first-child { 
 
    width: 1px; 
 
} 
 
.gridTable div { 
 
    max-width: 1px; 
 
}

<table class="gridTable"> 
 
    <tr> 
 
    <td>Col 1</td> 
 
    <td>Col 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Col 1</td> 
 
    <td><div> 
 
     Col 2a Col 2a Col 2a Col 2a Col 2a 
 
     Col 2b Col 2b Col 2b Col 2b Col 2b 
 
     Col 2c Col 2c Col 2c Col 2c Col 2c 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

: 여기

GridView1.DataSource = dt; 
GridView1.DataBind(); 

는 HTML입니다 당신을 도와 :

td { 
    word-break: break-word; 
} 

이 나는 ​​td와 t 내부에 긴 URL을했을 때 내가 한 것입니다 그는 URL 자체가 깨지지 않았고 테이블이 페이지 너비 이상으로 확장되도록했습니다.

여기 내 question에 대한 링크가 있습니다.

Answer 3

첫 번째 행의 각 td 너비를 추가하는 것이 좋습니다. 폭의 합계는 100 %가되어야합니다. 3 개의 동일한 열이 있고 각각의 경우 33.33 % 너비가있는 경우 4 = 25 % 인 경우 이들에 대한 올바른 비율을 계산하는 것보다 불균형 한 경우. demo

플러스에 할당 100 % 테이블의 폭과 오버 플로우 : 많은 내용을 숨기하기 위해 TDS 숨겨.

.gridTable{ width:100%} 
.gridTable td {overflow:hidden;}