HTML, CSS 및 JavaScript에서 올바르게 작동하는 가로 및 세로 스크롤 막대가 모두 포함된 고정 헤더 테이블을 어떻게 만들 수 있나요?-CSS 튜토리얼-php.cn

HTML, CSS 및 JavaScript에서 올바르게 작동하는 가로 및 세로 스크롤 막대가 모두 포함된 고정 헤더 테이블을 어떻게 만들 수 있나요?

DDD

풀어 주다： 2024-11-29 21:18:14

원래의

996명이 탐색했습니다.

How can I create a fixed header table with both horizontal and vertical scrollbars that function correctly in HTML, CSS, and JavaScript?

가로 스크롤바와 세로 스크롤바가 켜진 고정 헤더 테이블

다음을 사용하여 가로 및 세로 스크롤바가 있는 고정 헤더 테이블을 만드는 방법에 대한 질문입니다. HTML, CSS, 자바스크립트. 문제는 테이블에 세로 스크롤바를 추가하면 스크롤바가 엉망이 된다는 점입니다.

제공된 HTML, CSS 코드는 헤더와 본문이 포함된 기본 테이블을 생성하지만 스크롤바가 제대로 작동하지 않습니다. . JavaScript 코드는 스크롤 막대에 이벤트 리스너를 추가하여 사용자가 테이블을 스크롤할 때 헤더가 본문과 함께 이동하도록 합니다.

문제 해결 방법은 HTML, CSS 및 JavaScript를 조합하여 사용하는 것입니다. . HTML 코드는 표와 헤더를 생성하고 CSS 코드는 표와 스크롤 막대의 스타일을 지정합니다. JavaScript 코드는 스크롤 막대에 이벤트 리스너를 추가하여 사용자가 테이블을 스크롤할 때 헤더가 본문과 함께 이동합니다.

업데이트된 HTML 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <title>Fixed header table with horizontal scrollbar and vertical scrollbar on</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div>

로그인 후 복사

여기 업데이트된 CSS 코드는 다음과 같습니다.

body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
table {
    border-collapse: collapse; /* make simple 1px lines borders if border defined */
}
tr {
    width: 100%;
}

.outer-container {
    background-color: #ccc;
    position: absolute;
    top: 0;
    left: 0;
    right: 300px;
    bottom: 40px;

로그인 후 복사

위 내용은 HTML, CSS 및 JavaScript에서 올바르게 작동하는 가로 및 세로 스크롤 막대가 모두 포함된 고정 헤더 테이블을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!