Share on Facebook Share on Twitter

Bài này, Biên Thùy hướng dẫn các bạn tạo bảng biểu đáp ứng trên mọi trình duyệt, trên mọi thiết bị (Responsive table). Mình đã tham khảo khá nhiều kiểu responsive table như dạng kéo dãn, dạng cho vào div để co dãn, nhưng theo mình, kiểu responsive table mình giới thiệu sau đây là mẫu đẹp nhất và tiện lợi, dễ nhìn nhất cho người đọc.
Bắt đầu nào, đầu tiên là CSS, bạn copy đoạn CSS dưới đây cho vào file css trên site của bạn:

Nếu bạn không muốn cho vào file css hoặc bạn muốn test thử thôi thì chỉ cần cho đoạn code CSS dưới đây vào trước trên site của bạn:

Sau đó, chèn đoạn code hiển thị responsive table như bên dưới. Các bạn có thể sửa đổi, thêm cột, hàng theo ý muốn.

 

Đây là kết quả:
Hiện trên Desktop hoặc các thiết bị màn hình có độ phân giải chiều rộng lớn hơn 800px:

Responsive Bootstrap Table on Desktop

Responsive Bootstrap Table on Desktop

Đây là kết quả hiện trên mobile hoặc các thiết bị tablet:

Responsive Bootstrap Table on Desktop on Mobile and Tablet

Responsive Bootstrap Table on Desktop on Mobile and Tablet

Demo Responsive tables

Same tags:

  1. Fixed Menu When Scrolling & Fixed Navigation Menu Bar
  2. Dropdown Menu using Jquery and CSS
  3. CSS3 – Text Shadow, Rounded Corners and Multiple Backgrounds

Other Posts you may be interested in:

  1. Thủ thuật cho windows 10 chạy nhanh sau khi nâng cấp
  2. Unikey – phần mềm gõ tiếng việt không cần cài đặt cho Windows/Linux/Mac
  3. Những trang rút gọn link miễn phí tốt nhất
  4. Que thử giới tính thai nhi có chính xác không?
  5. Công cụ chuyển đổi đa định dạng, video – audio- picture với Format Factory
  6. PHP Random String Generator, Random Value from Array
  7. Hướng dẫn sửa lỗi font chữ tiếng Việt trong Microsoft Excel và Microsoft Word

Last updated on March 27th, 2018 at 10:16 pm

Comments

Leave A Reply