Hướng dẫn media table css - bảng phương tiện css

Tạo một table dọc với các thuộc tính đơn giản sau:

HTML viết:

    

        
Lorem ipsum
        
Integer aliquam magna vitae mattis aliquam.
    

    

        
Dolor sit
        
Nullam lacinia massa eget libero porttitor
    

    

        
Consectetur
        
Eu ultrices sem posuere.
    

    

        
Elit Maecenas
        
Proin vehicula ipsum vel luctus accumsan. Aenean sit amet dictum ligula.
    

    

        
Sodales
        
Ut sagittis semper lorem a tincidunt. Vivamus id risus tellus.
    

CSS viết:

table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 auto;
    width: 700px;
}

table th,
table td {
    border: 1px solid #ccc;
    padding: 10px;
}

table th {
    background-color: #f3f3f3;
}

Hiển thị trình duyệt:

Với table dọc như trên, ta vẫn có thể xem tốt ở một số thiết bị có chiều rộng màn hình trung bình, tuy nhiên với những màn hình nhỏ thì ngay cả giảm chiều rộng theo phần trăm vẫn khó có thể xem tốt được, để giải quyết trường hợp này, ta sẽ làm như sau:

CSS viết:

table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 auto;
    width: 700px;
}

table th,
table td {
    border: 1px solid #ccc;
    padding: 10px;
}

table th {
    background-color: #f3f3f3;
}

@media only screen and (max-width: 700px) {
    /* Table full chiều rộng màn hình, cách đều trái phải 10px */
    table {
        margin: 0 10px;
        width: auto;
    }
}

@media only screen and (max-width: 480px) {
    table th,
    table td {
        display: block;
        border-bottom: none;
    }

    table tr:last-child td {
        border-bottom: 1px solid #ccc;
    }
}

• Hiển thị trình duyệt:
• Lorem ipsum
  • Integer aliquam magna vitae mattis aliquam.

Dolor sit

Nullam lacinia massa eget libero porttitor

Consectetur

HTML viết:

    

        

            
Lorem ipsum
            
Dolor sit
            
Consectetur adipiscing
            
Elit Maecenas
            
Sodales
        
    

    

        

            
Integer aliquam magna vitae mattis aliquam.
            
Nullam lacinia massa eget libero porttitor
            
Eu ultrices sem posuere.
            
Proin vehicula ipsum vel luctus accumsan. Aenean sit amet dictum ligula.
            
Ut sagittis semper lorem a tincidunt. Vivamus id risus tellus.
        

        

            
Aenean pellentesque condimentum augue vitae finibus.
            
Aenean molestie tincidunt lorem.
            
Et efficitur turpis pretium vel. Ut congue gravida lacinia.
            
Nunc id congue urna. Proin interdum eleifend ex sit amet facilisis.
            
Maecenas venenatis vitae justo nec viverra. Cras et est augue.
        

        

            
Ut porttitor nulla velit, eget consequat sapien ultrices sed.
            
Vivamus condimentum commodo tincidunt.
            
Donec diam magna, tincidunt ut mollis id, mattis vel sem.
            
Quisque eleifend nulla ut massa lobortis auctor.
            
Ut aliquam accumsan quam, a posuere augue molestie vitae.
        
    

CSS viết:

table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 auto;
    width: 700px;
}

table th,
table td {
    border: 1px solid #ccc;
    padding: 10px;
}

table th {
    background-color: #f3f3f3;
}

Hiển thị trình duyệt:

table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 auto;
    width: 700px;
}

table th,
table td {
    border: 1px solid #ccc;
    padding: 10px;
}

table th {
    background-color: #f3f3f3;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 auto;
    width: 700px;
}

table th,
table td {
    border: 1px solid #ccc;
    padding: 10px;
}

table th {
    background-color: #f3f3f3;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 auto;
    width: 700px;
}

table th,
table td {
    border: 1px solid #ccc;
    padding: 10px;
}

table th {
    background-color: #f3f3f3;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 auto;
    width: 700px;
}

table th,
table td {
    border: 1px solid #ccc;
    padding: 10px;
}

table th {
    background-color: #f3f3f3;
}

Nunc id congue urna. Proin interdum eleifend ex sit amet facilisis.

• Maecenas venenatis vitae justo nec viverra. Cras et est augue.
• Ut porttitor nulla velit, eget consequat sapien ultrices sed.

CSS viết:

table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 auto;
    width: 700px;
}

table th,
table td {
    border: 1px solid #ccc;
    padding: 10px;
}

table th {
    background-color: #f3f3f3;
}

@media only screen and (max-width: 700px) {
    /* Table full chiều rộng màn hình, cách đều trái phải 10px */
    table {
        margin: 0 10px;
        width: auto;
    }

    /* Cho