Làm cho bảng có thể cuộn được trong CSS – làm cho bảng có thể cuộn theo chiều ngang css

Trộn bảng và thanh cuộn có thể hơi phi trực quan. Hãy đơn giản hóa nó!

Bạn đang xem : làm cho bảng có thể cuộn theo chiều ngang css

Tạo bảng có thể cuộn được trong CSS

Ngày 28 tháng 8 năm 2021 – 2 phút đọc

Bởi vì
Bảng HTML được đặt thành display: table theo mặc định, việc thêm thanh cuộn vào chúng là một chút không trực quan.

Chúng tôi có thể đặt các bảng của mình thành display: block và sửa đổi tràn của chúng từ đó, nhưng tôi thấy việc gói các bảng trong các vùng chứa dễ thích nghi và linh hoạt hơn. < / p>

Liên kết đến phần này Thanh cuộn của bảng dọc

Trước tiên, hãy thiết lập cuộn dọc. < / p>

Hãy xem xét & lt; table & gt; sau, được bao bọc trong một vùng chứa & lt; div & gt; :

  & lt; 

div

lớp

=

"tableContainer"

& gt; & lt;

bảng

lớp

=

"bảng"

& gt; ... & lt; /

bảng

& gt; & lt; /

div

& gt;

Chúng tôi có thể đặt chiều cao cho vùng chứa của bảng và sửa đổi bảng sao cho vừa khít với vùng chứa:

 . 

tableContainer

{

chiều cao

:

300

px

;

tràn

:

ẩn

; } .

bảng

{

vị trí

:

dính

;

đầu trang

:

0

;

chiều rộng

:

100

%

; }

Trong ví dụ này, tôi đặt chiều cao thành 300px – nhưng bạn có thể đặt chiều cao thành bất kỳ thứ gì bạn muốn!

Giờ đây, bảng của chúng tôi sẽ có một thanh cuộn thẳng đứng và sẽ không mở rộng ra ngoài chiều cao mà chúng tôi đã đặt.

Liên kết đến phần này Thanh cuộn bảng ngang

Nếu bạn muốn triển khai tính năng cuộn theo chiều ngang, ở đó là một cách tiếp cận rất giống với ví dụ về cuộn dọc:

 . 

tableContainer

{

tràn

:

ẩn

;

chiều rộng

:

800

px

; } .

bảng

{

vị trí

:

dính

;

đầu trang

:

0

;

chiều rộng

:

100

%

; }

Tôi đặt chiều rộng ở đây thành 800px , nhưng một lần nữa, bạn có thể thay đổi nó thành bất kỳ thứ gì bạn muốn.

Xem Thêm  Cách đặt màu nền bằng HTML và CSS - cách thay đổi màu nền trang web

Nếu bạn muốn cả thanh cuộn ngang và dọc cho bảng của mình, chỉ cần chỉ định cả height width trong .tableContainer .

Liên kết đến phần này Kết luận

Và đó là cách bạn có thể cuộn bảng của mình chỉ với một chút CSS !

Tôi luôn tham khảo lại đoạn mã này và tôi hy vọng bạn cũng thấy nó hữu ích.


Xem thêm những thông tin liên quan đến chủ đề làm cho bảng có thể cuộn theo chiều ngang css

Ai Cũng Có Ngày Xưa – Phan Mạnh Quỳnh | AUDIO LYRIC HD

  • Tác giả: Phan Mạnh Quỳnh Official
  • Ngày đăng: 2017-03-23
  • Đánh giá: 4 ⭐ ( 9985 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ai Cũng Có Ngày Xưa – Phan Mạnh Quỳnh | AUDIO LYRIC HD
    PHAN MẠNH QUỲNH OFFICIAL YOUTUBE CHANNEL

    Những ngả rẽ âm nhạc của Phan Mạnh Quỳnh: https://wp.me/p8Kagu-1vX

    Đăng ký kênh tại đây: https://bit.ly/phanmanhquynhofficial

    AUDIO LYRIC sử dụng bộ ảnh Tuổi thơ của nhiếp ảnh gia Herman Damar

    Ai Cũng Có Ngày Xưa – Phan Mạnh Quỳnh | AUDIO LYRIC HD
    Sản xuất âm nhạc: PMQ Studio
    Sáng tác: Phan Mạnh Quỳnh
    1.Dòng tin đăng quê hương tôi nay đang bão, gió lớn cuốn mấy mái ngói bay, nước cũng sắp cao ngang đầu. Chiều nay ai mang thêm bao nhiêu lo lắng chẳng biết sẽ có chỗ trú thân, hay thức trắng với cơn mưa dài.
    Vội nhớ đến những ký ức đã quá xa, Lúc ấy bé lắm có biết đâu, thích bão giông ngập lũ… Để cha bắt cá ngay trong sân nhà mình, con vui quên đi gió mùa về, ôi bao năm rồi…
    Giờ tự nhiên khóc…ooh..ai cũng có tuổi thơ, ai cũng có ngày xưa…

    2.Ngày xanh trôi nhanh hơn khi xưa ta nghĩ, lúc ấy chỉ muốn mau lớn lên, để không ai gọi trẻ con…
    Rồi khi bao bon chen ưu tư cuộc sống, ta mơ trở về ít phút thôi, tiếc những tháng năm êm đềm.
    Lại nhớ đến những lúc mới biết trước sau, mấy đứa cuối xóm chơi rất thân,mà mỗi đứa nay một nơi.
    Chẳng biết nghĩ đến những khi ta cười đùa có thấy rất vui hay chạnh lòng, vì chỉ còn dĩ vãng…
    Ngồi buồn tôi hát…ahh…tôi cũng có tuổi thơ, tôi cũng có ngày xưa…

    3.Ngày đó trong đêm khuya hanh khô nóng bức, bà ngồi quạt hoài đứa cháu thơ, gió đưa tôi vào giấc ngủ, Ngày đó mái tóc xanh đôi chân đi vững, ánh mắt vẫn sáng tay dắt tôi, rồi không muốn rời…
    Thời gian trôi qua những đứa bé lớn lên, nhưng ai ngăn mái tóc phai màu, ốm đau rồi đi mãi, phải chăng ai yêu thương bên ta 1 thời, cũng sẽ sang bên kia bầu trời. rồi tim nơi đâu.
    Ngồi buồn tôi nhớ…ooh..ai cũng có tuổi thơ, ai cũng có ngày xưa…Ai cũng nhớ tuổi thơ, ai cũng nhớ ngày xưa.

    PhanManhQuynh PhanManhQuynhChannel PhanManhQuynhOfficial MVPhanManhQuynh PMQstudio anhsaoduong

    More about PHAN MẠNH QUỲNH @
    FANPAGE: https://www.facebook.com/PhanManhQuynhOfficial/
    YOUTUBE: https://bit.ly/phanmanhquynhofficial
    GMAIL: pmqms1001@gmail.com & hubogo.arch@gmail.com

    ©2017 PMQ studio & ASD Entertainment. All rights reserved.
    ———————-

    MV OFFICIAL | KHI PHẢI QUÊN ĐI: https://youtu.be/i920BvFJILM

    VIDEO LIVE | NƯỚC NGOÀI: https://youtu.be/jNjhChsj-54

    Cảm ơn cả nhà đã và đang ủng hộ Phan Mạnh Quỳnh. Cảm ơn Family FC luôn đồng hành với Phan Mạnh Quỳnh từ trước đến nay. Chân thành cảm ơn.

    Xem tiểu sử Pham Mạnh Quỳnh tại https://vavomusic.com/portfolio/ca-si-phan-manh-quynh/

Canh giữa theo chiều dọc và chiều ngang với CSS

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

Bảng trong CSS

  • Tác giả: comdy.vn
  • Đánh giá: 5 ⭐ ( 5850 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, bạn sẽ học cách tạo kiểu cho bảng trong HTML bằng CSS.

Cách CSS Bảng (Table)

  • Tác giả: laptrinhvienphp.com
  • Đánh giá: 4 ⭐ ( 4196 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài hướng dẫn tự học CSS này, bạn sẽ tìm hiểu toàn tập cách CSS bảng đẹp, CSS table một cách dễ hiểu nhất.

CÁCH LÀM – Menu cuộn ngang

  • Tác giả: vi.w3hmong.com
  • Đánh giá: 3 ⭐ ( 4165 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu cách tạo menu có thể cuộn ngang bằng CSS.

Các hiệu ứng cuộn với JavaScript

  • Tác giả: www.javascriptbank.com
  • Đánh giá: 3 ⭐ ( 5357 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tất cả các hiệu ứng dùng cho tính năng cuộn trên trang web như cuộn tự động, cuộn theo nhiều hướng, cuộn chớp giật… – Trang 1 – Ngôn ngữ: tiếng Việt

Tạo Thanh Cuộn Dọc Trong Html & Css, Thêm Thanh Cuộn Ngang Vào Bảng Html

  • Tác giả: muare60s.vn
  • Đánh giá: 5 ⭐ ( 9265 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: – Thông thường, khi

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

Xem Thêm  Chiều rộng biên giới - bao gồm đường viền theo chiều rộng css