HTML 테이블에서 열을 숨기는 방법은 무엇입니까?
ASPX에서 테이블을 만들었습니다.요구 사항에 따라 열 중 하나를 숨기고 싶지만 다음과 같은 속성이 없습니다.visibleHTML 테이블 빌딩에 있습니다.어떻게 하면 제 문제를 해결할 수 있을까요?
이 경우 스타일 시트를 사용해야 합니다.
<td style="display:none;">
사용할 수 있습니다.nth-child전체 열을 숨기려면 CSS 선택기:
#myTable tr > *:nth-child(2) {
display: none;
}
이것은 열 N의 셀(즉, a)을 가정하여 작동합니다.th또는td)는 항상 해당 행의 N번째 자식 요소입니다.
열 번호를 동적으로 설정하려면 다음을 사용하여querySelectorAll또는 유사한 기능을 제시하는 프레임워크, 예를 들어jQuery여기:
$('#myTable tr > *:nth-child(2)').hide();
jQuery 솔루션은 지원하지 않는 기존 브라우저에서도 작동합니다.
다음을 사용할 수도 있습니다.
<td style="visibility:hidden;">
or
<td style="visibility:collapse;">
셀을 "숨겼지만" 공간을 유지하지만 "붕괴"할 경우 공간이 디스플레이처럼 유지되지 않는다는 차이점이 있습니다.이것은 전체 열 또는 행을 숨길 때 중요합니다.
코스의 대답은 거의 옳지만, 해로운 부작용을 일으킬 수 있습니다.이것이 더 정확합니다.
#myTable tr td:nth-child(1), #myTable th:nth-child(1) {
display: none;
}
CSS(캐스케이드 스타일 시트)는 모든 하위 항목에 속성을 캐스케이드합니다.즉,*:nth-child(1)첫 번째 항목을 숨깁니다.td각각의tr 그리고 모든 것의 첫 번째 요소를 숨깁니다.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>
알려진 문제: Google Chrome에서는 작동하지 않습니다.https://bugs.chromium.org/p/chromium/issues/detail?id=174167 에서 버그에 투표하십시오.
<style>
.hideFullColumn tr > .hidecol
{
display:none;
}
</style>테이블에는 .hideFullColumn을 사용하고 테이블에는 .hideColin을 사용합니다.인덱스가 각 td를 염두에 두지 않을 수 있기 때문에 문제가 될 수 있으므로 클래스 intd를 개별적으로 추가할 필요는 없습니다.
또한 열을 반복하여 Javascript로 스타일을 할당하고 특정 인덱스의 td 요소를 해당 스타일로 설정하여 프로그래밍 방식으로 vsdev가 제안하는 작업을 수행할 수 있습니다.
<!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);
열을 동적으로 숨길 수 있는 또 다른 솔루션은 다음과 같습니다.
숨길 열의 th와 td 모두에 대한 클래스 정의
<table>
<tr>
<th> Column 1 </th>
<th class="dynamic-hidden-col"> Column 2 </th>
<th Column 3 </th>
</tr>
<tr>
<td> Value 1 </td>
<td class="dynamic-hidden-col"> Value 2 </td>
<td> Value 3 </td>
</tr>
<td> row 2 Value 1 </td>
<td class="dynamic-hidden-col"> row 2 Value 2 </td>
<td> row 2 Value 3 </td>
<tr>
</table>
숨김 열에 대한 Jquery 스크립트입니다.
$('#hide-col').click(function () {
$(".dynmic-hidden-col").hide();
});
이렇게 하면 테이블 열을 동적으로 숨길 수 있습니다.
언급URL : https://stackoverflow.com/questions/5440657/how-to-hide-columns-in-html-table
'programing' 카테고리의 다른 글
| PostgreSQL에서 중복 업데이트 시 삽입하시겠습니까? (0) | 2023.05.21 |
|---|---|
| Git repo에 파일을 보관하지만 변경 내용을 추적하지 않음 (0) | 2023.05.21 |
| Swift에서 UI 버튼 이미지를 변경하는 방법 (0) | 2023.05.21 |
| HttpWebRequest 및 HttpWebResponse에서 HttpStatus 코드 번호(200, 301, 404 등) 가져오기 (0) | 2023.05.21 |
| SVN을 사용해야 합니까 아니면 Git을 사용해야 합니까? (0) | 2023.05.21 |