Css đáp ứng bảng

Trong bài viết này Hocban. vn Tổng hợp một số mẫu bảng – Mẫu bảng đáp ứng – HTML & CSS để bạn chèn vào trong bài viết. Và để tối ưu hiển thị trên di động thì tốt nhất ta nên để tầm 3 đến 4 cột nội dung thôi, nhiều quá sẽ xấu

#01 Họcban. vn mẫu bảng đơn giản – HTML & CSS 01

STTHọ và TênTổng kết cuối nămQuyết định của cô giáo Thảo1Tịnh Văn Nguyễn6. 9 Nhận phiếu bé ngoan tại nhà cô2Trần Thanh Thị Bình4. 0Ở lại lớp3Ngô Vân Trường4. 9Quét lớp 1 năm4Tuấn Văn Lê3. 4Đổi học

Đây là Code HTML và CSS mẫu để anh em chèn vào bài viết ở chế độ Text >> muốn sửa anh em chỉ cần chuyển qua tab Visual (trực quan) sửa lại nội dung và kéo giãn độ rộng là được

    

        

            
STT
            
Họ và Tên
            
Tổng kết cuối năm
            
Quyết định của cô giáo Thảo
        
        

            
1
            
Tịnh Văn Nguyễn
            
6.9
            
Nhận phiếu bé ngoan tại nhà cô
        
        

            
2
            
Trần Thanh Thị Bình
            
4.0
            
Ở lại lớp
        
        

            
3
            
Trần Thanh Thị Bình
            
4.9
            
Quét lớp 1 năm
        
        

            
4
            
Tuấn Văn Lê
            
3.4
            
Đuổi học
        
    

#02 Mẫu bảng đáp ứng 02 cột

Đơn giản mẫu với 2 cột. property and value as this

Thuộc tínhGiá trịborderđậm màu xanh 1px;text-aligngiữa;font-weightđậm;

Để sử dụng các bạn cố định mã bi sau và dán vào chế độ soạn thảo HTML (Blogspot / Văn bản của WordPress) > sau đó chuyển sang chế độ soạn thảo thông thường để chỉnh sửa nội dung

Bảng phản hồi sẽ hiển thị thanh cuộn ngang nếu màn hình quá nhỏ để hiển thị đầy đủ nội dung

Tên HọĐiểmĐiểmĐiểmĐiểmĐiểmĐiểmĐiểmĐiểmĐiểmĐiểmĐiểmĐiểmJillSmith505050505050505050505050EveJackson949494949494949494949494AdamJohnson676767676767676767676767

Thêm một phần tử vùng chứa (như

) với overflow-x:auto xung quanh phần tử để làm cho phần tử phản hồi nhanh

Thí dụ

bảng nội dung

Tự mình thử »

Ghi chú. 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 (mặc dù "tràn. cuộn" được đặt)