ASPX에서 테이블을 만들었습니다. 요구 사항에 따라 열 중 하나를 숨기고 싶지만 visible
HTML 테이블 건물 과 같은 속성이 없습니다 . 문제를 어떻게 해결할 수 있습니까?
답변
이 목적을 위해 스타일 시트를 사용해야합니다.
<td style="display:none;">
답변
nth-child
CSS 선택기를 사용하여 전체 열을 숨길 수 있습니다 .
#myTable tr > *:nth-child(2) {
display: none;
}
이것은 열 N의 셀 ( th
또는td
)이 항상 해당 행의 N 번째 자식 요소 .
열 번호를 동적으로 지정하려면 다음 querySelectorAll
과 같이 유사한 기능을 제공하는 프레임 워크 를 사용하여 수행 할 수 jQuery
있습니다.
$('#myTable tr > *:nth-child(2)').hide();
(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에 클래스를 개별적으로 추가 할 필요가 없습니다.