固定標題表與水平滾動條和垂直滾動條的
這是一個關於使用以下命令創建帶有水平和垂直滾動條的固定標題表的問題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中文網其他相關文章!