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

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

---

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;">

"숨김"이라는 차이점은 셀을 숨기지 만 공간을 유지하지만 "축소"를 사용하면 공간이 디스플레이 : 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>

작동하지 않는 크롬은 작동하지 않습니다. https://bugs.chromium.org/p/chromium/issues/detail?id=174167 에서 버그에 투표 하세요.

---

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

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

---

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

참고 URL : https://stackoverflow.com/questions/5440657/how-to-hide-columns-in-html-table