CSS만 사용하여 Bootstrap 3 테이블의 고정 헤더를 만드는 방법은 무엇입니까?

Bootstrap 테이블의 고정 헤더

Bootstrap 3에서 고정 헤더가 있는 테이블을 생성하려면 CSS 전용 솔루션이 필요합니다. 다음 단계는 프로세스를 안내합니다.

1. CSS 클래스 적용: 테이블에 다음 CSS 클래스를 추가합니다.

   • .tableFixHead를 포함하는 div
   • .tableFixHead 테이블 헤더에 대한 추가 셀

2. CSS 스타일 지정: 다음 CSS 스타일을 삽입하세요.

   .tableFixHead          { overflow: auto; height: 100px; }
   .tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

3. HTML 구조: 테이블에 적절한 HTML이 있는지 확인하세요. 구조:

   <div class="tableFixHead">
     <table class="table">
       <thead>
         <tr>
   <th>TH 1</th>
   <th>TH 2</th>
   </tr>
       </thead>
       <tbody>
         <tr>
   <td>A1</td>
   <td>A2</td>
   </tr>
         <tr>
   <td>B1</td>
   <td>B2</td>
   </tr>
         <tr>
   <td>C1</td>
   <td>C2</td>
   </tr>
         <tr>
   <td>D1</td>
   <td>D2</td>
   </tr>
         <tr>
   <td>E1</td>
   <td>E2</td>
   </tr>
       </tbody>
     </table>
   </div>

이 솔루션을 구현하면 테이블 헤드가 테이블 상단에 고정되어 본문이 수직으로 스크롤될 수 있습니다.

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