CSS만 사용하여 테이블에 고정 헤더와 열을 만드는 방법은 무엇입니까?

순수 CSS를 사용하여 테이블의 고정 헤더 및 열

순수 CSS를 사용하여 고정 헤더와 고정 첫 번째 열이 있는 테이블을 생성할 수 있습니다. position: 끈적한 속성을 사용하여 달성할 수 있습니다. 이 접근 방식은 JavaScript 또는 jQuery를 사용하는 솔루션보다 더 효율적이고 브라우저 간 호환됩니다.

해결책:

1. 표 정리 컨테이너:

   `

   `

2. 컨테이너에서 스크롤 활성화:

   `div.container {
   오버플로: 스크롤;
   }`

3. 테이블을 끈적하게 헤더:

   `thead th {
   위치: -webkit-sticky; / Safari의 경우 /
   위치: 끈적;
   상단: 0;
   }`

4. 첫 번째 열 고정:

   `tbody th {
   위치: -웹킷 고정; / Safari용 /
   위치: 고정;
   왼쪽: 0;
   }`

5. 선택 사항: 고정 왼쪽 상단에 있는 첫 번째 열의 헤더:

   `thead th:first-child {
   왼쪽: 0;
   z-index: 2;
   }`

추가 참고 사항:

• 최적의 성능을 위해서는 컨테이너의 너비와 높이가 최대이어야 합니다. set.
• 첫 번째 열에 대신 요소를 사용하려면 CSS에서 tbody th 대신 tbody td:first-child를 사용하세요.
• 머리글과 첫 번째 열의 스타일을 추가로 지정하려면 필요에 따라 CSS 속성을 조정하세요.

예:

<div class="container">
  <table border="1">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>John Doe</td>
        <td>john@example.com</td>
        <td>(555) 123-4567</td>
      </tr>
      <tr>
        <th>2</th>
        <td>Jane Smith</td>
        <td>jane@example.com</td>
        <td>(555) 234-5678</td>
      </tr>
      <!-- More rows... -->
    </tbody>
  </table>
</div>

div.container {
  max-width: 500px;
  max-height: 300px;
  overflow: scroll;
}

thead th {
  position: sticky;
  top: 0;
}

tbody th {
  position: sticky;
  left: 0;
}

thead th:first-child {
  left: 0;
  z-index: 2;
}

위 내용은 CSS만 사용하여 테이블에 고정 헤더와 열을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!