스크롤 가능한 Div 내부에 고정 헤더 테이블을 만드는 방법은 무엇입니까?

스크롤 가능한 Div 내부에 고정 헤더 테이블을 만드는 방법

스크롤하는 동안 헤더를 고정하려면 테이블 2개를 사용하는 것이 좋습니다. 하나는 정적으로 유지되는 헤더용이고 다른 하나는 오버플로가 활성화된 고정 높이 div로 래핑된 콘텐츠 셀용입니다.

HTML:

<div class="wrap">
    <table class="head">
        <thead>
            <tr>
                <th>Head 1</th>
                <th>Head 2</th>
                <th>Head 3</th>
            </tr>
        </thead>
    </table>
    <div class="inner_table">
        <table>
        <tbody>
            <tr>
                <td>Body 1</td>
                <td>Body 2</td>
                <td>Body 3</td>
            </tr>
            <!-- More table rows here -->
        </tbody>
    </table>
    </div>
</div>

CSS:

.wrap {
    width: 352px;
}

.wrap table {
    width: 300px;
    table-layout: fixed;
}

table tr td {
    padding: 5px;
    border: 1px solid #eee;
    width: 100px;
    word-wrap: break-word;
}

table.head tr td {
    background: #eee;
}

.inner_table {
    height: 100px;
    overflow-y: auto;
}

이 접근 방식은 테이블 내용이 스크롤되어 내용이 중요한 열 이름을 가리는 것을 방지합니다.

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