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

CSS만 사용하여 고정 헤더와 고정 열이 있는 테이블을 만드는 방법

문제

데이터를 체계적으로 표시하려는 노력 중 , 고정된 헤더와 고정된 첫 번째 열을 모두 갖춘 HTML 테이블을 만드는 것을 목표로 하고 있습니다. 그러나 탐색을 통해 JavaScript 또는 jQuery에 의존하는 다양한 솔루션이 발견되었으며, 이는 이상적이지 않은 스크롤 동작으로 인해 모바일 브라우저에 잠재적인 단점이 발생할 수 있습니다. 따라서 이제 귀하의 추구는 순수한 CSS 솔루션을 찾는 데 중점을 두고 있습니다.

솔루션

다행히도 최신 버전의 Chrome, Firefox 및 Edge에서 지원되는 끈적끈적한 속성은 다음과 같은 방법을 제공합니다. 원하는 행동을 달성합니다. 이를 오버플로: 스크롤 속성과 결합하여 고정된 헤더 및 열 요소가 있는 동적 테이블을 생성할 수 있습니다.

단계

1. 컨테이너: 테이블을 배치하여 시작합니다. 상위 div 내부 및 오버플로 적용: div로 스크롤하여 스크롤을 활성화합니다.
2. 머리글 및 열 고정성: 위치 고정 속성을 위쪽, 오른쪽 또는 왼쪽 값과 함께 활용하여 테이블 요소가 준수해야 하는 가장자리를 지정합니다.
3. 첫 번째 열 머리글 고정성: 첫 번째 열의 헤더가 왼쪽에 고정되어 있는지 확인하기 위한 thead th:first-child 속성 edge.

예

HTML 마크업:

<div class="container">
  <table>
    <thead>
      <tr>
        <th></th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
    </tbody>
  </table>
</div>

CSS:

div {
  max-width: 400px;
  max-height: 150px;
  overflow: scroll;
}

thead th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
}

tbody th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
}

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

thead th {
  background: #000;
  color: #FFF;
  z-index: 1;
}

tbody th {
  background: #FFF;
  border-right: 1px solid #CCC;
  box-shadow: 1px 0 0 0 #ccc;
}

table {
  border-collapse: collapse;
}

td,
th {
  padding: 0.5em;
}

이 구현을 사용하면 헤더와 헤더를 유지하면서 수직 및 수평으로 스크롤할 수 있습니다. 첫 번째 열이 배치되어 표 형식 데이터 보기에 대한 향상된 사용자 환경을 제공합니다.

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