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

Program / 글쓴이

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

답변

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

<td style="display:none;">

답변

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 에서도 작동합니다 ).

답변

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

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

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

답변

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!)를 숨겨집니다.

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

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

답변

부트 스트랩 사람들 .hidden은 <td>.

답변

col 요소 https://developer.mozilla.org/en/docs/Web/HTML/Element/col을 사용하여 열을 숨길 수도 있습니다.

테이블에서 두 번째 열을 숨기려면 :

<table>
  <col />
  <col style="visibility:collapse"/>
  <tr><td>visible</td><td>hidden</td></tr>
  <tr><td>visible</td><td>hidden</td></tr>

알려진 문제 : Chrome에서는 작동하지 않습니다. https://bugs.chromium.org/p/chromium/issues/detail?id=174167 에서 버그에 투표 하세요.

답변

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

스 니펫 확장

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