ASPX에서 테이블을 만들었습니다. 요구 사항에 따라 열 중 하나를 숨기고 싶지만 visible
HTML 테이블 건물 과 같은 속성이 없습니다 . 문제를 어떻게 해결할 수 있습니까?
ASPX에서 테이블을 만들었습니다. 요구 사항에 따라 열 중 하나를 숨기고 싶지만 visible
HTML 테이블 건물 과 같은 속성이 없습니다 . 문제를 어떻게 해결할 수 있습니까?
답변:
이 목적을 위해 스타일 시트를 사용해야합니다.
<td style="display:none;">
td:first-child { 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처럼 유지되지 않습니다. 이는 전체 열 또는 행을 숨길 때 중요합니다.
visibility: collapse
이와 사이에 셀 너비 / 높이를 다시 계산할 때 차이가 있기 때문에 셀 표시 / 숨기기 처리를 위해 특별히 설계되었습니다 display:none
. 참조 developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values
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 에서 버그에 투표 하세요.
<!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);