Hướng dẫn về Thanh cuộn trong Bảng HTML. Ở đây chúng tôi thảo luận về cách tạo Thanh cuộn trong Bảng Html, cùng với một số ví dụ về tính năng.

Bạn đang xem : bảng có thể cuộn ngang html

Thanh cuộn trong Bảng HTML

Giới thiệu về Thanh cuộn trong Bảng HTML

Trong Thanh cuộn trong Bảng HTML là một trong những tính năng để cuộn dữ liệu từ cả định dạng ngang và dọc. Chúng tôi sẽ phân bổ đường viền, chiều cao và chiều rộng của các bảng cuộn. Theo mặc định, thanh cuộn dọc được bật sau khi nhập số lượng dữ liệu để tối đa hóa kích thước ở chế độ dọc. Nhưng ở chế độ ngang, sau khi nhập dữ liệu ở định dạng đoạn văn và không được bao bọc, trang chứa mũi tên bên phải là tùy chọn để bật dữ liệu trong thanh cuộn ngang. Chúng tôi đã tùy chỉnh các tùy chọn cuộn với sự trợ giúp của con trỏ chuột.

Tạo Thanh cuộn trong Bảng HTML

Khi nội dung của hộp văn bản quá lớn không thể vừa với, hộp Cuộn HTML sẽ đảm bảo rằng hộp này sẽ phát triển các thanh cuộn. Một số ứng dụng như ứng dụng dành cho thiết bị di động đã sử dụng hộp cuộn, nó sẽ hiển thị các tính năng của chúng nhưng trong màn hình di động lớn sẽ hiển thị tốt một số màn hình di động nhỏ khả năng tương thích nó sẽ không hiển thị trong màn hình, tức là) tính năng ứng dụng sẽ được sử dụng trong hộp cuộn . Trong các ứng dụng web sẽ được sử dụng trên màn hình trình duyệt, cần có một số plugin để hiển thị một số tính năng. Giả sử chúng ta muốn thêm tùy chọn thanh cuộn trong HTML, hãy sử dụng tùy chọn “tràn” và đặt tùy chọn này là tự động bật để thêm cả thanh cuộn ngang và dọc. Nếu chúng tôi muốn thêm tùy chọn thanh dọc trong Html, hãy thêm dòng “tràn-y” vào tệp.

Khởi động phần mềm miễn phí của bạn Khóa học phát triển

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

  • Cú pháp tệp CSS cho thanh cuộn

Tràn: cuộn:

  {
Overflow-x: scroll; // thêm tùy chọn thanh ngang trong html
Overflow-y: scroll; // thêm tùy chọn thanh dọc trong html
}  
  • Cú pháp tệp HTML cho thanh cuộn

Bằng cách sử dụng & lt; Kiểu & gt; , chúng tôi sẽ thêm các tùy chọn cuộn trong chính Trang HTML.

  & lt; style & gt;
div.scroll
{
Chiều rộng-5px;
Chiều cao-10 px;
Overflow-x: scroll;
}
& lt; / style & gt;  

Ví dụ về Thanh cuộn trong Bảng HTML

Dưới đây là các ví dụ cho bảng HTML:

Ví dụ # 1

Mã:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; & lt; / title & gt;
& lt; phong cách & gt;
.divScroll {
tràn: cuộn;
chiều cao: 100px;
chiều rộng: 200px;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; div class = "divScroll" & gt;
SivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaramanSivaraman
& lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

thanh cuộn trong bảng HTML

Ví dụ trên cho thấy chúng tôi đã bật tính năng cuộn theo thanh ngang và dọc; nếu văn bản vượt quá giới hạn hộp văn bản, tính năng cuộn sẽ tự động bật.

Ví dụ # 2

Mã:

  & lt; html & gt;
& lt; phong cách & gt;
.divScroll {
tràn: cuộn;
chiều cao: 25px;
chiều rộng: 200px;
}
& lt; / style & gt;
& lt; body & gt;
& lt; trung tâm & gt;
& lt; marquee class = "divScroll" color: "white" & gt; Chào mừng bạn đến với miền của tôi & lt; / marquee & gt;
& lt; / center & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

Xem Thêm  , Hoặc Toán tử "Hoặc" - Hướng dẫn - justacodingblog - làm thế nào để làm hoặc trong javascript

thanh cuộn trong bảng HTML

Trong ví dụ trên, chúng tôi đã sử dụng & lt; marquee & gt ;; chúng tôi sẽ hiển thị văn bản trong vùng chọn bằng cách sử dụng tùy chọn cuộn. Chúng ta có thể sử dụng hiệu ứng động văn bản trong các thanh cuộn. Chúng tôi cũng đã sử dụng các tập hợp & lt; marquees & gt; như Cuộn nhanh hơn, Thoát nhanh hơn, Cuộn văn bản xuống, Cuộn văn bản lên, Văn bản nhảy, Tốc độ bình thường, v.v.

Ví dụ # 3

Dưới đây là Ví dụ, chúng tôi sẽ sử dụng chức năng cảnh báo về số lượng dữ liệu sẽ được hiển thị trên trang web ở định dạng pixel.

Mã:

  & lt; html & gt;
& lt; body & gt;
& lt; trung tâm & gt;
& lt; div id = "example" class = "tràn-y: scroll; width: 100px; height: 200px; border: 1px solid black" color: "white" & gt;
& lt; marquee & gt; Chào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôi
& lt; / marquee & gt;
& lt; / div & gt;
& lt; button onclick = "alert (getComputedStyle (example) .width)" & gt; alert (getComputedStyle (example) .width) & lt; / button & gt;
& lt; / center & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

thanh cuộn trong bảng HTML

Ví dụ # 4

Chúng tôi có thể sử dụng hàng trong bảng & lt; tr & gt;, tiêu đề bảng & lt; td & gt;, dữ liệu bảng & lt; td & gt ;, các thẻ được sử dụng trong HTML, bằng cách sử dụng & lt; div & gt; , chúng tôi sẽ tự kích hoạt các kiểu, tức là) & lt; div style = ”tràn-x: auto;” & gt;

Mã:

  & lt; html & gt;
& lt; body & gt;
& lt; trung tâm & gt;
& lt; div style = "tràn-x: auto;" & gt;
& lt; bảng & gt;
& lt; tr & gt;
& lt; th & gt; Chào mừng bạn đến với miền của tôi & lt; / th & gt;
& lt; th & gt; Tên & lt; / th & gt;
& lt; th & gt; Email & lt; / th & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td & gt; Sivaraman & lt; / td & gt;
& lt; td & gt; Sivaraman & lt; / td & gt;
& lt; td & gt; ramansiva57@gmail.com< / td & gt;
& lt; / div & gt;
& lt; / center & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

thanh cuộn trong bảng HTML

Ví dụ # 5

Ở đây, chúng ta sẽ xem các Loại Hộp cuộn khác nhau trong HTML

  • Hộp cuộn màu
  • Thanh cuộn tùy chỉnh
  • Hộp cuộn có hình ảnh
  • Hộp cuộn có Đường viền
1. Hộp cuộn màu

Trong tùy chọn hộp cuộn, chúng tôi cũng đã thêm các loại màu khác nhau trong các vùng không gian của hộp văn bản Ví dụ bên dưới:

Mã:

  & lt; html & gt;
& lt; body & gt;
& lt; div style = "height: 125px; width: 100px; Over: auto; background-color: yellowgreen; color: white; scrollbar-base-color: gold; font-family: sans-serif; padding: 10px;" & gt ; Chào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôi & lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

Xem Thêm  Chương trình ghi dữ liệu trong tệp văn bản - GeeksforGeeks - javascript ghi vào tài liệu

domain

Trong ví dụ trên, chúng tôi đã chỉ định các màu trong văn bản, giống nhau trong bảng cuộn.

2. Thanh cuộn tùy chỉnh

Chúng tôi đã tùy chỉnh các thanh cuộn bằng cách sử dụng các tiện ích mở rộng Webkit; nó sẽ hoạt động trên các trình duyệt.

Mã:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; phong cách & gt;
thân hình {
margin-bottom: 200%;
}
.scroll {
biên giới: không có;
đệm: 5px;
phông chữ: 24px / 36px sans-serif;
chiều rộng: 200px;
chiều cao: 200px;
tràn: cuộn;
}
:: - webkit-thanh cuộn {
chiều rộng: 12px;
chiều cao: 12px;
}
:: - webkit-scrollbar-track {
biên giới: 1px màu xanh vàng đặc;
bán kính đường viền: 10px;
}
:: - webkit-scrollbar-thumb {
nền: vàng xanh;
bán kính đường viền: 10px;
}
:: - webkit-scrollbar-thumb: hover {
nền: # 88ba1c;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; div class = "scroll" & gt;
Chào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôiChào mừng đến với miền của tôi
& lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

thanh cuộn tùy chỉnh

Trong các mã trên, chúng tôi đã thấy các tùy chọn cuộn trên chính trang đầy đủ. Đó là tùy chọn tùy chỉnh của riêng chúng tôi; chúng tôi đã bật các tùy chọn cuộn trong toàn màn hình nền. Một lần, chúng tôi cũng đã kiểm tra Khả năng tương thích của trình duyệt vì đôi khi công cụ –Webkit theo kiểu CSS không chấp nhận một số trình duyệt, ví dụ như Microsoft có phần mở rộng –ms- và các nhà cung cấp trình duyệt khác như phần mở rộng –Webkit-.

3. Hộp cuộn có hình ảnh

Chúng tôi đã sử dụng hộp Cuộn trong Hình ảnh cũng như trong hình nền hoặc hình nền trước. Hãy để chúng tôi xem một số ví dụ cơ bản về tính năng này.

Mã:

  & lt; html & gt;
& lt; div style = "height: 180px; width: 180px; Over: auto;" & gt;
& lt; img src = "C: \ Users \ Public \ Pictures \ Ảnh mẫu \ Penguins.jpg" alt = "Ảnh mẫu cho hộp cuộn" & gt;
& lt; / div & gt;
& lt; / html & gt;  

Đầu ra:

hình ảnh hộp cuộn

4. Đường viền hộp cuộn

Chúng tôi cũng đã thêm các đường viền trong các khu vực bảng cuộn. Nó sẽ được hiển thị giống như phần được đánh dấu Ví dụ bên dưới:

Mã:

  & lt; div style = "height: 100px; width: 140px; tràn: auto; border: 8px solid yellow; padding: 3%" & gt; Chào mừng bạn đến với Miền của tôiChào mừng bạn đến với Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain.Welcome to My Domain. & Lt; / div & gt;  

Đầu ra:

scrollbox border

Hình trên được hiển thị vùng cuộn sẽ được đánh dấu, giống như chúng ta đã thêm các đường viền khác nhau như đường chấm, đường đứt nét, đường viền kép, v.v.

Các tính năng của Thanh cuộn trong Bảng HTML

  • Khi chúng tôi sử dụng Hộp cuộn, hộp này có thể có một số tính năng như.,
  • Đơn giản và gọn nhẹ
  • Tự động phát
  • Nhiều bản sao trên một trang
  • Các tùy chọn hữu ích như tùy chỉnh văn bản của bạn trong một lần cuộn
  • Chúng tôi cũng sử dụng thư viện jquery trong các hộp cuộn; nếu họ sử dụng, chúng tôi sẽ có một tính năng như nút điều hướng Trước / Tiếp theo
Xem Thêm  Tham gia đầy đủ bên ngoài trong SQL Server - máy chủ sql tham gia đầy đủ bên ngoài

Kết luận

Nói chung, Chúng tôi đã sử dụng rất nhiều tính năng trong ngôn ngữ HTML, nhưng Thanh cuộn là một trong những tính năng tốt nhất để làm rõ dữ liệu trên trang web để hiển thị nội dung. Các ví dụ và điểm trên đây là những điều cơ bản; trong khi đó, chúng ta sẽ có nhiều khái niệm và tính năng nâng cao trong HTML, CSS với tùy chọn Scroll bar. Trong các Phiên bản mới nhất, HTML 5, CSS 3, nó có thể thêm một số tùy chọn trong các vùng cuộn văn bản.

Các bài báo được đề xuất

Đây là hướng dẫn về Thanh cuộn trong Bảng HTML. Ở đây chúng tôi thảo luận về cách tạo Thanh cuộn trong Bảng Html và một số tính năng và ví dụ tương ứng. Bạn cũng có thể xem qua các bài viết đề xuất khác của chúng tôi để tìm hiểu thêm–

1

Chia sẻ

Chia sẻ


Xem thêm những thông tin liên quan đến chủ đề bảng có thể cuộn ngang html

Fixed table header using HTML and CSS with vertical *and* horizontal scrollbars

alt

  • Tác giả: Code Isshin
  • Ngày đăng: 2021-11-09
  • Đánh giá: 4 ⭐ ( 3594 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Making a fixed table header using just CSS and HTML where the table content is scrollable both vertically and horizontally.

    This is only to fix the table column names. There can be multiple ways to achieve this, this is just what I found as the easiest.

    Code on GitHub: https://github.com/zangetsu-isshin/fixed-header-css/tree/main

Cuộn ngang và cuộn dọc với fullPage.js

  • Tác giả: webdesign.tutsplus.com
  • Đánh giá: 5 ⭐ ( 8907 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ngày nay càng nhiều trang được thiết kế dựa trên cách tiếp cận đơn-trang (hay còn gọi là các trang web đơn-trang hoặc một-trang) Trong bài viết này, chúng tôi sẽ khám phá cách để tạo ra những…

Cách Tạo Bảng Đẹp Trong Html Mới Nhất 2020, Cách Tạo Bảng (Table) Trong Html

  • Tác giả: ruby-forum.org
  • Đánh giá: 3 ⭐ ( 5601 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: “Hãy hòa nhã với những kẻ dở hơi, Ai biết được ngày sau bạn có thể phải làm việc cho một kẻ như vậy

Thêm thanh cuộn ngang trên bảng HTML có tiêu đề cố định?

  • Tác giả: isolution.pro
  • Đánh giá: 4 ⭐ ( 6948 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tạo thannh cuộn ngang với css – CSS Horizontal Scrolling

  • Tác giả: www.webtopviet.com
  • Đánh giá: 3 ⭐ ( 7417 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS Scrollbar : Tạo thannh cuộn ngang với css – CSS Horizontal Scrolling

Cách tạo văn bản cuộn màn hình với CSS [ + Công cụ mã ]

  • Tác giả: kynguyencongnghe.com
  • Đánh giá: 4 ⭐ ( 6328 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách tạo hộp có văn bản cuộn với CSS và HTML

  • Tác giả: www.greelane.com
  • Đánh giá: 4 ⭐ ( 7072 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS giúp bạn dễ dàng tạo văn bản cuộn bằng hộp văn bản HTML. Tìm hiểu cách sử dụng HTML để thiết lập thanh cuộn để đối phó với văn bản tràn.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php