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

집

웹 프론트엔드

CSS 튜토리얼

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

DDD

Nov 29, 2024 pm 09:18 PM

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.