CSS를 사용하여 고정 헤더가 있는 스크롤 가능한 테이블을 어떻게 생성합니까?-CSS 튜토리얼-php.cn

CSS를 사용하여 고정 헤더가 있는 스크롤 가능한 테이블을 어떻게 생성합니까?

Linda Hamilton

풀어 주다： 2024-11-26 10:09:13

원래의

193명이 탐색했습니다.

How do I create a scrollable table with fixed headers using CSS?

CSS를 사용하여 고정 헤더가 있는 스크롤 가능한 테이블 설정

테이블에 스크롤 가능한 본문과 고정 헤더가 모두 있지만 이 효과를 얻는 방법을 잘 모르겠습니다. . 이 문제를 해결하기 위해 를 사용하여 HTML에서 헤더와 본문 요소를 분리합니다. 및 .

<table>
  <thead>
    <tr>
      <th>head1</th>
      <th>head2</th>
      <th>head3</th>
      <th>head4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1, cell 1</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
  </tbody>
</table>

로그인 후 복사

다음으로 에 대해 display: block을 설정합니다. 그리고 헤더에 영향을 주지 않고 동작을 분리하고 본문에서 스크롤을 활성화합니다.

table tbody, table thead {
  display: block;
}

로그인 후 복사

본문의 오버플로 및 높이 속성을 정의합니다.

table tbody {
  overflow: auto;
  height: 100px;
}

로그인 후 복사

헤더와 본문은 다음과 같습니다. 시각적으로 분리되어 있지만 기술적으로 연결되어 <번째> 그리고 적절한 열 정렬을 보장하는 요소입니다.

th {
  width: 72px;
}

td {
  width: 72px;
}

로그인 후 복사

헤더 행을 포함한 각 행에 대해.

<tr>
  <th>head1</th>
  <th>head2</th>
  <th>head3</th>
  <th>head4</th>
</tr>

로그인 후 복사

위 내용은 CSS를 사용하여 고정 헤더가 있는 스크롤 가능한 테이블을 어떻게 생성합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!