HTML 행 셀이 비어있는 경우 축소하거나 숨기는 방법은 무엇입니까?

Question

나는 html 테이블 행에 몇 개의 링크가 있습니다. 코드 뒤에 몇 가지 조건에 따라 몇 개의 링크가 숨어 있습니다. 그러나 페이지는 좋지 않게 보이고 컨트롤을 숨기는 공간을 보여줍니다.

HTML 행이 빈 셀인 경우 CSS로이 공백을 제거하는 방법.

Answer 1

Working jsFiddle Demo

$(function() { 
    $('table tr').each(function() { 
     var flag = true; 
     $(this).find('td').each(function() { 
      var l = $(this).html().replace(/\s+/g, '').length; 
      if (l) { 
       flag = false; 
      } 
     }); 

     if (flag) { 
      $(this).remove(); 
     } 
    }); 
}); 

Answer 2

당신은 모든 행에 대해 한 곳에서 테이블 스타일링을 수행 할 COL 태그를 사용하여 시도 할 수 있지만 테이블 레이아웃을 설정해야합니다 웹 페이지

html 코드 : 고정 된 스타일 테이블 또는 테이블 CSS의 클래스와의 셀에 대한 오버 플로우의 스타일을 설정

http://www.w3schools.com/TAGS/tag_col.asp

<table class="fixed"> 
    <col width="20px" /> 
    <col width="30px" /> 
    <col width="40px" /> 
    <tr> 
     <td>text</td> 
     <td>text</td> 
     <td>text</td> 
    </tr> 
</table> 

이 먼저,에, xxxxx는 당신이 클래스에 사용할 이름입니다 class="xxxxx"를 입력하여 (클래스의 속성을 설정

table.fixed { table-layout:fixed; } 
table.fixed td { overflow: hidden; } 

Answer 3

당신의 CSS 수 html 요소의 여는 태그)가 각 <tr>에 대해 숨겨집니다. 이 작업을 동적으로 수행하려면 jQuery 또는 다른 것을 사용하십시오. 동시에 숨겨지는 모든 <tr>이 동일한 클래스를 공유하는지 확인하십시오. 그런 다음 CSS에 .xxxxx{display:none}을 사용하십시오. display:none을 사용하는 경우 테이블 행이 계속 표시되지만 (원하는 위치에 있다고 가정) 공간을 차지하지 않습니다.

Answer 4

확인이 DEMO http://jsfiddle.net/yeyene/6SHPP/1/

휴대 아무것도 또는 공백을 갖는이없는 경우,이 스크립트는 그들 모두를 숨 깁니다.

$('table td').each(function() { 
    if($(this).text() == '' || $(this).text() == ' ') 
     $(this).parent('tr').remove();  
});