CSS를 사용하여 테이블 열을 숨기는 방법

웹 디자인이 발전하면서 가장 초기의 페이지 레이아웃 방법 중 하나인 테이블은 우리에게 어느 정도 친숙해졌으며 웹 디자인에서 널리 사용됩니다. 테이블은 조판 기능이 풍부한 HTML 마크업 언어로 웹 디자인에서 자주 사용되며 복잡한 데이터 정보와 차트를 표시하는 데 자주 사용됩니다. 그러나 어떤 경우에는 테이블에 모든 정보를 표시하지 않고 일부만 표시하고 싶을 수도 있습니다. 이 경우 CSS는 테이블의 특정 열을 숨기는 매우 간단하고 효과적인 방법을 제공합니다. 오늘은 CSS를 사용하여 테이블 열을 숨기는 방법을 알아 보겠습니다.

1. CSS 스타일 시트의 표시 속성

우리는 CSS에 요소의 표시 상태를 설정할 수 있는 표시라는 속성이 있다는 것을 알고 있습니다. 예를 들어 텍스트의 경우 표시 속성은 " 없음" 값입니다. 숨겨져 있습니다. 따라서 테이블 열을 숨기려면 표시 속성을 사용하여 테이블 열을 숨길 수 있습니다.

2. 숨기기 열 구현 방법

다음으로 간단한 HTML 테이블을 사용하여 설명합니다. 동시에 열 숨기기 기능을 구현하려면 CSS에 스타일만 추가하면 됩니다.

먼저 간단한 HTML 테이블을 정의하고 스타일을 설정합니다.

nbsp;html>


    <meta>
    <title>CSS를 사용하여 테이블 열을 숨기는 방법</title>
    <style>
        table{
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td{
            border: 1px solid black;
            padding: 5px;
        }
    </style>


    

                                                                                                                                                                                                                                                                                                                                                                                                                                

姓名	性别	年龄	居住地址
张三	男	25	北京市
李四	女	30	上海市
王五	男	28	广州市

스타일 설정에서는 표의 바깥쪽 테두리, 셀 간격 등을 포함한 기본 표 스타일을 설정합니다. 따라서 테이블은 다음과 같습니다.

테이블 "Gender"의 두 번째 열을 숨기려면 표시 속성만 사용해야 한다고 가정해 보겠습니다.

table td:nth-child(2),
table th:nth-child(2){
    display: none;
}

위 CSS 문을 사용하여 테이블의 두 번째 열에서 "성별"을 숨기는 효과를 얻으세요. 즉, CSS 선택기: nth-child(n) 속성을 통해 테이블의 특정 열 수에 해당하는 td 또는 th 요소를 얻을 수 있고, 스타일의 display:none 값을 통해 요소를 얻을 수 있습니다. 이 열의 내용을 숨길 수 있습니다.

여기서 CSS 문의 의미를 설명합니다.

table td:nth-child(2),  // 选中表格第二列td
table th:nth-child(2){  // 选中表格第二列th
    display: none;   // 隐藏所选择的td、th
}

display 속성을 사용하는 것이 매우 간단하다는 것을 알 수 있습니다. 테이블 숨기기 기능을 얻으려면 원래 CSS 스타일에 위의 코드 줄만 추가하면 됩니다. 열. 이제 구체적인 효과를 살펴보겠습니다.

사진에서 보시다시피 두 번째 열 'Gender'가 성공적으로 숨겨졌습니다.

3. 열 숨기기와 잘린 열의 차이점

CSS에는 테이블에서 열을 숨기는 데 사용할 수 있는 truncated라는 또 다른 속성이 있습니다. hide와의 차이점은 hide는 요소를 숨기는 반면 truncated는 요소를 0픽셀 너비로 늘려 완전히 숨겨지고 점유되지 않는 효과를 얻는다는 것입니다.

truncated의 코드는 다음과 같습니다.

table td:nth-child(2),
table th:nth-child(2){
    width: 0;
    padding: 0;
    border: none;
    white-space: nowrap;
}

truncated에서는 요소의 너비를 0으로 설정했을 뿐만 아니라 패딩과 테두리도 0으로 설정했습니다. 또한 내용을 약간 왼쪽으로 이동하여 내용이 감싸지는 것을 방지하려면 white-space:nowrap을 사용하세요. 이러한 방식으로 테이블의 두 번째 행인 "Gender"를 성공적으로 숨겼습니다.

4. hide 및 truncated 메서드 적용 시나리오

다음으로 hide 및 truncated 메서드 적용 시나리오를 간략하게 요약하겠습니다.

숨기기 방식의 경우 메뉴바의 하위 메뉴 등 표시와 숨기기를 전환해야 하는 장면에 더 적합합니다. 또한 hide는 페이지의 아름다움과 적용성을 보장하기 위해 테이블에서 특정 비정상적인 데이터를 숨기는 데에도 적합합니다.

잘린 방법은 테이블의 레이아웃과 계층 구조를 유지하면서 테이블의 특정 데이터를 숨겨야 하는 시나리오에 더 적합합니다. 예를 들어 블로그의 댓글 목록에서 사용자의 민감한 정보를 숨길 수 있습니다. 여전히 ID 정보를 0으로 확장하고 레이아웃 공간을 차지하지 않습니다.

요약하자면, hide 방식과 truncated 방식의 차이는 디자인 요구 사항과 데이터를 숨겨야 하는 테이블의 성격에 따라 다릅니다. 이를 사용할 때는 실제 상황에 따라 선택해야 합니다.

위 내용은 CSS를 사용하여 테이블 열을 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!