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

프런트 엔드 개발에서 테이블은 데이터를 표시하는 데 사용되는 매우 일반적인 구성 요소입니다. 그러나 때로는 모든 데이터를 표시하고 싶지 않고 특정 열이나 행을 숨겨야 하는 경우가 있습니다. 이때 CSS를 사용하여 테이블을 숨겨야 합니다.

1. 테이블 열 숨기기

1. 표시 속성 사용

CSS에서 표시 속성을 사용하여 테이블의 열을 숨길 수 있습니다. 구체적인 단계는 다음과 같습니다.

먼저 숨겨야 하는 열에 특수 클래스 이름을 설정합니다. 예를 들어 숨기려는 열의 이름을 "hidden-column"으로 지정합니다.

그런 다음 CSS에서 이 클래스 이름에 해당하는 열에

    .hidden-column { 
      display: none; 
    }

를 설정하면 이 열이 숨겨집니다.

예를 들어, 다음은 간단한 테이블입니다.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tom</td>
      <td>23</td>
      <td>tom@example.com</td>
      <td>(123) 456-7890</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>27</td>
      <td>jane@example.com</td>
      <td>(987) 654-3210</td>
    </tr>
    <tr>
      <td>John</td>
      <td>35</td>
      <td>john@example.com</td>
      <td>(111) 222-3333</td>
    </tr>
  </tbody>
</table>

테이블의 "이메일" 열을 숨기려면 다음과 같이 할 수 있습니다.

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

여기서 CSS의 :nth-child() 선택기를 사용하여 어떤 열을 숨겨야 하는지 지정합니다. 숨겨지세요.

2. 가시성 속성 사용

열을 숨기는 또 다른 방법은 CSS에서 가시성 속성을 사용하는 것입니다. 표시 속성과 차이점은 표시 속성을 사용하여 테이블 열을 숨길 때 숨겨진 열은 여전히 ​​페이지의 원래 위치를 차지하지만 표시 속성을 사용하면 숨겨진 열이 제거된다는 것입니다. 페이지 레이아웃에서 제거되었습니다.

여기 코드도 첫 번째 방법과 유사합니다. ：

.hidden-column {
  visibility: hidden;
}

2. 표 행 숨기기

표 행 전체를 숨기려면 열 숨기기와 유사한 방법을 사용할 수 있습니다.

1. 표시 속성을 사용하세요

열 숨기기와 유사하게 CSS의 표시 속성을 사용하여 테이블 행을 숨길 수도 있습니다. 구체적인 단계는 다음과 같습니다.

먼저 숨겨야 할 행에 특수 클래스 이름을 설정합니다. 예를 들어 숨겨야 하는 두 번째 행의 이름을 "hidden-row"로 지정합니다.

그런 다음 CSS에서 이 클래스 이름에 해당하는 행을 설정합니다:

.hidden-row {
  display: none;
}

2. 가시성 속성을 사용하세요

열 숨기기와 유사하게 CSS의 가시성 속성을 사용하여 테이블 행을 숨길 수도 있습니다. 마찬가지로 이 방법을 사용하여 숨겨진 테이블 행은 여전히 ​​페이지의 원래 위치를 차지하지만 더 이상 표시되지 않습니다.

visibility 속성을 사용하여 테이블 행을 숨기는 코드는 다음과 같습니다.

.hidden-row {
  visibility: hidden;
}

3. 요약

위는 CSS를 사용하여 테이블 열이나 행을 숨기는 방법입니다. 어떤 방법을 사용하든 특정 HTML 요소나 CSS 선택기를 통해 표 셀이나 행을 숨길 수 있습니다. 실제 개발 과정에서 이러한 기술을 이해하고 사용하면 테이블의 스타일과 레이아웃을 더 잘 제어하고 프런트엔드 개발 효율성을 향상시킬 수 있습니다.

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