HTML 테이블에서 열을 숨기는 방법은 무엇입니까?


93

ASPX에서 테이블을 만들었습니다. 요구 사항에 따라 열 중 하나를 숨기고 싶지만 visibleHTML 테이블 건물 과 같은 속성이 없습니다 . 문제를 어떻게 해결할 수 있습니까?

답변:


171

이 목적을 위해 스타일 시트를 사용해야합니다.

<td style="display:none;">

1
HTML의 CSS를 사용하는 첫 번째 coloumn은 어떻습니까
office 302

javascript createelement (td)를 사용하여 테이블을 만들 때 스타일을 어떻게 추가해야합니까?
사무실 302

1
@ office302이 스타일을 첫 번째 td에만 적용 하시겠습니까? 또는 CSS 만 사용하고 싶을 때-이렇게하면됩니다td:first-child { display:none; }
Anuraj

등 첫 아이> 지원 어쨌든 IE (11)와 에지, 좋은 있습니다 : 주목해야한다 @Anuraj
비탈리 테르 지에프

88

nth-childCSS 선택기를 사용하여 전체 열을 숨길 수 있습니다 .

#myTable tr > *:nth-child(2) {
    display: none;
}

이것은 열 N의 셀 ( th또는td )이 항상 해당 행의 N 번째 자식 요소 .

여기 데모가 있습니다.


열 번호를 동적으로 지정하려면 다음 querySelectorAll과 같이 유사한 기능을 제공하는 프레임 워크 를 사용하여 수행 할 수 jQuery있습니다.

$('#myTable tr > *:nth-child(2)').hide();

jQuery를 사용한 데모

(jQuery 솔루션은를 지원하지 않는 레거시 브라우저nth-child 에서도 작동합니다 ).


1
이것은 부작용을 일으킬 수 있습니다 . 개선 된 해결책은 아래의 제 답변을 참조하십시오 .
Rick Smith

@RickSmith 좋은 지적입니다. 다른 방법으로 문제를 방지하기 위해 내 게시물을 업데이트했습니다 (하위 선택기 사용).
Kos

자식 선택기가 확실히 더 좋습니다. 좋은 대답입니다.
Rick Smith

좋은 솔루션이지만 colspan 케이스에 대해 좀 더 고려할 필요가 있습니다.
Cinoss

30

다음을 사용할 수도 있습니다.

<td style="visibility:hidden;">
or
<td style="visibility:collapse;">

"숨겨진"차이점은 셀을 숨기지 만 공간을 유지하지만 "축소"를 사용하면 공간이 display : none처럼 유지되지 않습니다. 이는 전체 열 또는 행을 숨길 때 중요합니다.


1
div 태그 축소의 경우 공간도 유지된다는 것을 알았습니다. div 태그의 경우 display : none; 진정으로 무너지고 공간을 잡지 않기 위해서입니다.
Dov Miller

5
visibility: collapse이와 사이에 셀 너비 / 높이를 다시 계산할 때 차이가 있기 때문에 셀 표시 / 숨기기 처리를 위해 특별히 설계되었습니다 display:none. 참조 developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values
SteveB

28

Kos의 대답은 거의 맞지만 부작용이있을 수 있습니다. 이것이 더 정확합니다.

#myTable tr td:nth-child(1), #myTable th:nth-child(1) {
    display: none;
}

CSS (Cascading Style Sheets)는 속성을 모든 하위 항목에 계단식으로 배열 합니다. 이 수단 *:nth-child(1)처음 숨길 td각의를 tr AND는 모두의 첫 번째 요소 숨길 td아이들. 귀하의td 버튼, 아이콘, 입력 또는 선택 같은 것들을 가지고, 첫 번째는 (woops!)를 숨겨집니다.

현재 숨길 항목 이 없더라도 추가해야 할 경우 길에 좌절감을 이미지화하십시오. 당신의 미래의 자아를 그렇게 처벌하지 마십시오. 디버그하기가 고통 스러울 것입니다!

내 대답은 첫 번째 숨길 수 tdth모든에 tr에서 #myTable안전하게 다른 요소를 유지합니다.




2

<style>
.hideFullColumn tr > .hidecol
{
    display:none;
}
</style>

테이블에서 .hideFullColumn을 사용하고 th에서 .hidecol을 사용하십시오. 인덱스가 각 td를 염두에 두지 않을 수 있기 때문에 문제가 될 수 있으므로 td에 클래스를 개별적으로 추가 할 필요가 없습니다.


1

열을 반복하고 특정 인덱스에서 해당 스타일을 갖도록 td 요소를 설정하여 Javascript로 스타일을 할당하여 vs dev가 프로그래밍 방식으로 제안하는 것을 수행 할 수도 있습니다.


0
<!doctype html>
<html lang="en">
<head>
<style id="myStyleSheet">
...
</style>

var column = 3;
var styleSheet = document.getElementById("myStyleSheet").sheet;
var rule = "table  tr td:nth-child("+ column +"),table th:nth-child("+ column +") 
{display: none}";
styleSheet.insertRule(rule);

2
희망은 문제를 해결할 수 있지만 코드에 대한 설명을 추가하여 사용자가 실제로 원하는 것을 완벽하게 이해할 수 있도록하십시오.
Jaimil Patel
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.