tr.style.display = 'none'은 귀찮은 공간을 남깁니다

일부 테이블 행을 제거하는 javascript 기능이 있습니다. 나는 그들을 나중에 다시 보여주고 싶기 때문에 그냥 숨기고 싶다.tr.style.display = 'none'은 귀찮은 공간을 남깁니다

나는 style.display = none을 사용하고 있습니다.

tr.style.display = '';

을 그리고 내 테이블 행이 다시 표시됩니다 : 나는 그들을 다시 표시 할 때

tr.style.display = 'none';

난 그냥 전화. 잘 작동합니다.

그러나 인터넷 익스플로러에서는 행이 있던 곳에서 약 1-2 픽셀 높이에 성가신 빈 공간이 있습니다. Chrome은이 행을 완전히 숨 깁니다.

(IE가 jsfiddle에서 작동하지 않기 때문에 JSFiddle에 표시 할 수 없습니다).

누구나 알고 계십니까?

출처

2014-02-24 Oliver Watkins

어떤 버전의 IE입니까? JSFiddle IE9 이후에 잘 작동합니다. –

불행히도 8. 주위에 없습니다. –

IE의 행에 기본 패딩이 있습니까? 어쩌면 다시 설정해도 빈 공간이 없을 것입니다 (IE 개발자 도구로 살펴보고 행을 검사 할 수 있습니다) – Nico

롤 당신은 스스로를 걷어차 고, IE8에서 이것을 시험해 보았습니다. 그리고 나는 똑같은 것을 얻었습니다. 그리고 그 이유를 알 수 없었습니다. 그때 저는 옛날 학교의 html을 기억했습니다. 이것을 당신의 테이블에 추가하십시오.

<table cellpadding="0" cellspacing="0" border="0">

나는 1px 공간도 얻었습니다. 추가하고 나갔습니다. 또한 패딩과 마진을 줄이려면 스타일 시트에서 *를 사용해보십시오. 그런 다음 클래스를 추가하여 테이블을 제어하십시오. 여기에 내가 테스트 한 코드가있다.

<html><head><title></title> 
    <style> 
     * { padding:0; margin:0; } 
     .visiblerow { background:#ccc; } 
     .visiblecell { padding: 10px; margin: 10px; } 
     .hiddenrow { background:#000; display: none; } 
     .hiddencell { padding: 0px; margin: 0px; } 
    </style> 
</head> 
<body> 
    <table cellpadding="0" cellspacing="0" border="0"> 
     <tr class="visiblerow"> 
      <td class="visiblecell">test</td> 
     </tr> 
     <tr class="hiddenrow"> 
      <td class="hiddencell">hide me</td> 
     </tr> 
     <tr class="visiblerow"> 
      <td class="visiblecell">test</td> 
     </tr> 
    </table> 
</body> 
</html>

IE8의 테이블 태그에서 셀 패딩, 간격, 테두리를 제거하면 1 픽셀 공간이 반환됩니다. 이제 클래스를 정의하여 행의 클래스도 전환 할 수있는 멋진 자바 스크립트 함수를 만들 수 있습니다.

출처

2014-02-24 14:33:54 tremor

위대한입니다. 그러나 나는 테이블 그리드가 존중되어야하기 때문에 간격과 패딩을 0으로 설정할 수 없다. –

비어 있지 않은 행의 스타일에 공백과 패딩을 추가하려면 아마도 .. hiddenrow & visiblerow 클래스를 사용하십시오. 가시 행 클래스에는 CSS 패딩 속성이 추가 될 수 있습니다. 내 대답을 편집하여이를 더 잘 보여줍니다. – tremor

모든 것을 시도했지만 아무 것도 작동하지 않는 것 같습니다. 우리는 로직을 서버 측으로 변경해야했습니다. –

tr.style.display = 'none'은 귀찮은 공간을 남깁니다

답변

관련 문제