Làm cho bảng có thể cuộn được trong CSS – bảng css cuộn ngang và dọc

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 : cuộn bảng css theo chiều ngang và dọc

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.

Xem Thêm  Cách thêm CSS - làm thế nào để liên kết với css

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.

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ủ đề bảng css cuộn ngang và dọc

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

  • Tác giả: Code Isshin
  • Ngày đăng: 2021-11-09
  • Đánh giá: 4 ⭐ ( 7074 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

Cách Tạo Thanh Cuộn Dọc Trong Html, Cách Tạo Thanh Cuộn (Scroll) Cho Một Phần Tử Html

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

Các cách căn dọc giữa trong CSS

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 9194 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu Đã bao giờ các bạn thắc mắc cái thuộc tính vertical-align: middle trong CSS chưa? Rõ ràng tên nó là căn dọc giữa mà sao nó lại không căn dọc giữa cho mình chứ? Nếu bạn chưa biết nguyên nhân…

Cách CSS Bảng (Table)

  • Tác giả: laptrinhvienphp.com
  • Đánh giá: 3 ⭐ ( 7359 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.

Luận văn, đồ án, luan van, do an

  • Tác giả: doan.edu.vn
  • Đánh giá: 4 ⭐ ( 3309 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Casscading Style Sheet – CSS – CSS là gì?
    Một số đặc tính cơ bản của CSS
    Áp dụng CSS
    Cú pháp – Cách tạo CSS
    Background
    Thiết lập văn bản
    Tạo M…

Bảng trong CSS

  • Tác giả: vietjack.com
  • Đánh giá: 3 ⭐ ( 9662 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bảng trong CSS – Học CSS cơ bản và nâng cao theo từng bước bắt đầu từ CSS là gì, Thuộc tính trong CSS, Cú pháp CSS, Căn lề trong CSS, Border trong CSS, Căn chỉnh vị trí trong CSS, Định dạng Text trong CSS, Pseudo Class, Pseudo Element, Phần tử giả trong CSS, Hiệu ứng trong CSS, Đơn vị trong CSS, Color trong CSS, Chia cột trong CSS, Qui tắc trong CSS.

Bài 24: Bố cục CSS – Horizontal & Vertical Align

  • Tác giả: timoday.edu.vn
  • Đánh giá: 5 ⭐ ( 4072 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách căn giữa mọi thứ theo cả chiều dọc và chiều ngang bằng CSS, có thể áp dụng cho mọi loại element, layout, …

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  4 cách dễ dàng để chèn dấu cách trong HTML - html khoảng cách giữa các chữ cái