CSS 및 JavaScript를 사용하여 HTML 테이블 헤더를 어떻게 고정할 수 있습니까?-JS 튜토리얼-php.cn

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

Barbara Streisand

풀어 주다： 2024-12-09 00:06:13

원래의

364명이 탐색했습니다.

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><div class="code" style="position:relative; padding:0px; margin:0px;"><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 중국어 웹사이트의 기타 관련 기사를 참조하세요!