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、JavaScript。問題は、垂直スクロールバーをテーブルに追加すると、スクロールバーが混乱することです。

提供された 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 中国語 Web サイトの他の関連記事を参照してください。