집 >웹 프론트엔드 >JS 튜토리얼 >CSS 및 JavaScript를 사용하여 HTML 테이블 헤더를 어떻게 고정할 수 있습니까?

CSS 및 JavaScript를 사용하여 HTML 테이블 헤더를 어떻게 고정할 수 있습니까?

Barbara Streisand원래의: 2024-12-09 00:06:13296검색

How Can I Freeze HTML Table Headers Using CSS and JavaScript?

고정 HTML 테이블 헤더를 위한 CSS 및 JavaScript 기술

Microsoft에서 볼 수 있는 HTML 테이블의 열 제목을 고정하는 기능 Excel의 "창 고정" 기능은 확장된 테이블에 매우 적합합니다. CSS 또는 JavaScript를 사용하여 이 효과를 얻을 수 있는 여러 브라우저 간 기술이 있습니다.

CSS 변환 기술>

최신 브라우저의 경우 CSS 변환은 간단한 기능을 제공합니다. 효과적인 솔루션:

 vartranslate = "translate(0," this.scrollTop "px)";<br> this.querySelector("thead").style.transform =translate;<br>});<br>

이 코드는 스크롤 이벤트를 수신합니다. 테이블 컨테이너를 탐색하고 스크롤 위치에 따라 테이블 헤더(thead)를 변환합니다.

의 장점 CSS 변환 기술:

최소 코드(4줄)
외부 종속성 없음
다양한 테이블 구성(테이블 레이아웃)과 작동
Internet Explorer를 제외한 모든 주요 브라우저 지원 8-

구현 예:

 var 번역 = "번역(0," this.scrollTop "px)";<br> this.querySelector("thead").style.transform =translate;<br>});

 기존 컨테이너 </em>/</p><h1>포장 {</h1><pre class="brush:php;toolbar:false">overflow: auto;
height: 400px;

}

/ 데모용 CSS /
td {

background-color: green;
width: 200px;
height: 100px;

}

<pre class="brush:php;toolbar:false"><table>
    <thead>
        <tr>
            <th>Foo</th>
            <th>Bar</th>
        </tr>
    </thead>
    <tbody>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
    </tbody>
</table></p>
<p></div>

”

위 내용은 CSS 및 JavaScript를 사용하여 HTML 테이블 헤더를 어떻게 고정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css html for using class var this position transform column table td microsoft excel Translate

성명：

이전 기사：JavaScript 상속은 생성자 속성과 'instanceof' 연산자에 어떤 영향을 미치나요?다음 기사：JavaScript 상속은 생성자 속성과 'instanceof' 연산자에 어떤 영향을 미치나요?