Làm cách nào để làm cho bảng bootstrap có thể cuộn ngang?

Hôm nay mình muốn chia sẻ với các bạn bảng bootstrap scroll ngang dọc. Trong bài đăng này, chúng tôi sẽ hiển thị cho bạn các bảng bootstrap với tiêu đề cố định và phần thân có thể cuộn được, hãy nghe đối với các bảng bootstrap 4 cuộn ngang và dọc, chúng tôi sẽ cung cấp cho bạn bản demo và ví dụ để thực hiện. Trong bài đăng này, chúng ta sẽ tìm hiểu về Bootstrap Tables Border với một ví dụ

bootstrap 4 bảng cuộn ngang và dọc Code Ví dụ

nội dung

  • bootstrap 4 bảng cuộn ngang và dọc Code Ví dụ
    • bảng bootstrap với cuộn
    • Bài viết liên quan

bảng bootstrap với cuộn

ví dụ 1

<div style="height: 700px;overflow: scroll;">
<!-- change/update any height to increase the number of visible row  -->
	<table></table>
</div>

Tôi hy vọng bạn có ý tưởng về bảng bootstrap cuộn tiêu đề cố định ngang và dọc.
Tôi muốn có phản hồi về infinityknow của mình. blog com.
Phản hồi, câu hỏi hoặc nhận xét có giá trị của bạn về bài viết này luôn được hoan nghênh.
Nếu bạn thích và thích bài đăng này, đừng quên chia sẻ.

Bài viết liên quan

  1. Làm cách nào để thêm khoảng cách dọc cho các cột Bootstrap?
  2. thanh trượt băng chuyền dọc bootstrap với ví dụ jQuery
  3. Làm cách nào để tạo một dải phân cách dọc bootstrap?
  4. Bootstrap 4 Ví dụ đáp ứng các tab dọc
  5. Làm cách nào để tạo đường thẳng đứng giữa các cột bằng bootstrap?
  6. Làm cách nào để tạo bootstrap 4 tab dọc?
  7. jQuery An Animated Scroll To Top Button
  8. cách tạo tab ngang trong html?
  9. Đặt lại mẫu mật khẩu Mẫu widget bootstrap miễn phí
  10. Ví dụ về viền bảng Bootstrap

Tài liệu và ví dụ về kiểu dáng bảng chọn tham gia (do chúng được sử dụng phổ biến trong các plugin JavaScript) với Bootstrap

ví dụ

Do việc sử dụng rộng rãi các bảng trên các tiện ích của bên thứ ba như lịch và bộ chọn ngày, chúng tôi đã thiết kế các bảng của mình để được chọn tham gia. Chỉ cần thêm lớp cơ sở


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
6 vào bất kỳ

  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
7 nào


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
8

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
8

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  

Tùy chọn đầu bảng

Tương tự với bảng và bảng tối, sử dụng các lớp sửa đổi


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
9 hoặc

  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  



  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
0 để làm cho s có màu xám nhạt hoặc tối

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  



  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  

hàng sọc

Sử dụng


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  



  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
1 để thêm sọc vằn vào bất kỳ hàng nào trong bảng

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  

bảng có viền

Thêm


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  



  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
2 cho đường viền trên tất cả các mặt của bảng và ô

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
3

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
3

Hàng có thể di chuột

Thêm


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  



  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
3 để bật trạng thái di chuột trên các hàng của bảng trong một

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
3

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
3

Bàn nhỏ

Thêm


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  



  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
4 để làm cho các bảng nhỏ gọn hơn bằng cách cắt đôi phần đệm ô

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
3

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
3

các lớp theo ngữ cảnh

Sử dụng các lớp theo ngữ cảnh để tô màu các hàng của bảng hoặc các ô riêng lẻ

ClassHeadingHeadingActiveCellCellDefaultCellCellPrimaryCellCellSecondaryCellCellSuccessCellCellDangerCellCellWarningCellCellInfoCellCellLightCellCellDarkCellCell


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
1

Các biến thể nền của bảng thông thường không khả dụng với bảng tối, tuy nhiên, bạn có thể sử dụng các tiện ích nền hoặc văn bản để đạt được các kiểu tương tự

#HeadingHeading1CellCell2CellCell3CellCell4CellCell5CellCell6CellCell7CellCell8CellCell9CellCell


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
2

Truyền đạt ý nghĩa cho các công nghệ hỗ trợ

Việc sử dụng màu sắc để thêm ý nghĩa chỉ cung cấp dấu hiệu trực quan, dấu hiệu này sẽ không được chuyển tải đến người dùng công nghệ hỗ trợ – chẳng hạn như trình đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu sắc rõ ràng từ chính nội dung (e. g. văn bản hiển thị), hoặc được bao gồm thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung ẩn với lớp


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  



  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
5

Tạo các bảng đáp ứng bằng cách bao bọc bất kỳ


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
6 nào bằng

  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  



  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
7, làm cho bảng cuộn theo chiều ngang tại mỗi điểm dừng của

  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  



  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
8 lên đến (nhưng không bao gồm) lần lượt là 576px, 768px, 992px và 1120px

Lưu ý rằng vì các trình duyệt hiện không hỗ trợ các truy vấn ngữ cảnh phạm vi, nên chúng tôi khắc phục các hạn chế của tiền tố


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  



  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
9 và

  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
0 và chế độ xem có độ rộng phân số (chẳng hạn như có thể xảy ra trong một số điều kiện nhất định trên thiết bị có độ phân giải cao) bằng cách sử dụng các giá trị có độ chính xác cao hơn cho

chú thích

Một chức năng giống như một tiêu đề cho một bảng. Nó giúp người dùng có trình đọc màn hình tìm một bảng và hiểu nội dung của bảng đó cũng như quyết định xem họ có muốn đọc bảng đó không

Danh sách người dùng#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
3

bảng đáp ứng

Các bảng đáp ứng cho phép các bảng được cuộn theo chiều ngang một cách dễ dàng. Làm cho bất kỳ bảng nào phản hồi nhanh trên tất cả các chế độ xem bằng cách bao bọc một


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
6 với

  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
2. Hoặc, chọn một điểm ngắt tối đa để có một bảng phản hồi tối đa bằng cách sử dụng

  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  



  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
7

Các bảng đáp ứng sử dụng


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
4, loại bỏ bất kỳ nội dung nào nằm ngoài các cạnh dưới cùng hoặc trên cùng của bảng. Đặc biệt, điều này có thể loại bỏ các menu thả xuống và các tiện ích con của bên thứ ba khác

Luôn đáp ứng

Trên mọi điểm ngắt, hãy sử dụng


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
2 cho các bảng cuộn theo chiều ngang

#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading1CellCellCellCellCellCellCellCellCell2CellCellCellCellCellCellCellCellCell3CellCellCellCellCellCellCellCellCell


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
4

Điểm dừng cụ thể

Sử dụng


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  



  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  
7 khi cần thiết để tạo các bảng đáp ứng cho đến một điểm dừng cụ thể. Từ điểm dừng đó trở lên, bảng sẽ hoạt động bình thường và không cuộn theo chiều ngang