테이블 행이 숨겨져있을 때 HTML 열 너비가 바뀝니다.

Question

저는 웹 프로그래밍에 대해 상대적으로 신참이기 때문에 아마도 여기에서 명백한 실수를 저지르고있을 것입니다.

[i] .style.display = 'none'과 같은 자바 스크립트에서 테이블의 행을 숨기려고하면 테이블 레이아웃이 완전히 손상됩니다. 원래, 셀 내용은 감싸 였고 테이블 너비는 줄어들고있었습니다. 그런 다음 table 태그에 style = "table-layout : fixed"를 추가하고 각 td에 style = "white-space : nowrap"를 추가했습니다. 이로 인해 줄 바꿈이 중지되었지만 내용이 한 줄에 정렬되지 않았습니다. 한 행에서 다른 행으로 공간과 열 너비가 다른 경우 셀이 왼쪽으로 이동하기 시작했습니다. 그런 다음 th 및 td 요소 각각에 고정 폭을 추가하고 테이블을 포함하는 div에도 추가했습니다. 여전히 문제는 남아있었습니다.

현재 HTML은 다음과 같습니다. 테이블은 처음에 표시

<div style="width: 300px"> 
    <table id="errorTable" width="100%" cellpadding="5" cellspacing="2" style="table-layout: fixed"> 
    <tr id="HeaderRow"> 
     <th style="width: 100px;">Header 1</th> 
     <th style="width: 50px;">Header 2</th> 
     <th style="width: 150px;">Header 3</th> 
    </tr> 
    <tr id="DetailRow1">           
     <td style="white-space:nowrap; width: 100px;">Data 1_1 in Row 1</td> 
     <td style="white-space:nowrap; width: 50px;">Data 1_2 in Row 1</td> 
     <td style="white-space:nowrap; width: 150px;">Data 1_3 in Row 1</td> 
    </tr> 
    <tr id="DetailRow2">           
     <td style="white-space:nowrap; width: 100px;">Data 2</td> 
     <td style="white-space:nowrap; width: 50px;">Data 2</td> 
     <td style="white-space:nowrap; width: 150px;">Data 2</td> 
    </tr> 
    <tr id="DetailRow3">           
     <td style="white-space:nowrap; width: 100px;">Data 3_1</td> 
     <td style="white-space:nowrap; width: 50px;">Data 3_2</td> 
     <td style="white-space:nowrap; width: 150px;">Data 3_3</td> 
    </tr> 
    </table> 
</div> 

---

---

은 컬럼 폭을 각각 100, 50, 150 (PX)와 적절하게 정렬된다. 그러나 두 번째 행이 숨겨진 행이 표시되면 나머지 두 개의 행의 셀 너비가 더 이상 100, 50 및 150으로 고정되지 않으며 데이터가 더 이상 수직으로 정렬되지 않습니다. 전체 테이블 너비는 300 픽셀로 유지됩니다. 사용 가능한 공간이 있으면 각 셀의 데이터가 왼쪽으로 이동하고 마지막 공간,이 경우 세 번째 열에서 추가 공간이 사용됩니다.

다음 게시물은 도움이되었지만 알 수 있듯이 완전히 제 문제를 해결하지 못했습니다. Hiding table rows without resizing overall width

도움이 될 것입니다.

Answer 1

항상 열 너비를 수정하십시오. 그게 당신 문제일까요?

.myTable td{ width:33% !important; } 

이상적으로, 당신은 또한 thead 및 tbody

<table> 
    <thead> 
    <tr> ... </tr> 
    </thead> 

    <tbody> 
    . 
    .  
    . 
    </tbody> 
</table> 

Answer 2

저도 같은 문제에 봉착를 사용하여 헤더와 본문 섹션을 묶어야합니다. 나는 각 테이블의 내부에 스팬을 던져서 폭을 강제 할 수 있는지를 확인했다. 그래도 추한 데.

Answer 3

동일한 문제가 있습니다. 열을 elem.style.display="none"으로 숨기려고했지만 다시 표시 할 때 레이아웃이 깨졌습니다. 나를 위해 일한이 디스플레이 스타일 :

columns.item(i).style.display = "table-cell";