Cách thực hiện - Bảng đáp ứng
Tìm hiểu cách tạo bảng đáp ứng.
Bảng đáp ứng
Một bảng đáp ứng sẽ hiển thị một thanh cuộn ngang nếu màn hình quá nhỏ để hiển thị toàn bộ nội dung. Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng:
Họ | Họ | Điểm | Điểm | Điểm | Điểm | Điểm | Điểm | Điểm | Điểm | Điểm | Điểm | Điểm | Điểm | Điểm | Điểm | Điểm | Điểm | Điểm | Điểm | Điểm |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Jill | thợ rèn | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
đêm | Jackson | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
Adam | Johnson | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
Để tạo một bảng đáp ứng, hãy thêm một phần tử vùng chứa overflow-x:auto
xung quanh <table>:
Thí dụ
<div style="overflow-x:auto;">
<table>
...
</table>
</div>
Lưu ý: Trong OS X Lion (trên Mac), thanh cuộn được ẩn theo mặc định và chỉ hiển thị khi được sử dụng (ngay cả khi "tràn: cuộn" hoặc tự động được đặt).
Mẹo: Đi tới Hướng dẫn về bảng CSS của chúng tôi để tìm hiểu thêm về cách tạo kiểu bảng.