如何建立一個具有水平和垂直滾動條的固定標題表，並在 HTML、CSS 和 JavaScript 中正常運作？-css教學-PHP中文網

首頁

web前端

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 和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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn