Cách ẩn cột bảng tốt nhất cho chế độ xem di động

Question

Tôi có bảng HTML, trong trình duyệt trên điện thoại di động, tôi cần ẩn một số cột của bảng.

Tôi muốn ẩn 2 hoặc 3 trong số các cols này bằng cách sử dụng @media truy vấn nếu có thể. mã bên dưới không hoạt động đối với tôi:

<table> 
    <tr> 
     <td></td> 
     <td class='collapsable'></td> 
     <td class='collapsable'></td> 
     <td></td> 
    </tr> 
</table> 


     //hide cols here 
     td.collapsable {display:block; } 

     @media only screen and (min-width: 450px) { 
      //show cols here 
      td.collapsable {display:none; } 
     } 

Answer 1

Something như this? (thử thay đổi kích thước cửa sổ Result/pane)

HTML:

<tr> 
    <td class="one">corpse</td> 
    <td>corpse</td> 
    <td>corpse</td> 
</tr> 

CSS:

table{ 
     width: 50%; 
    } 
    td, th{ 
     border: 1px solid orange; 
    } 


    @media only screen and (max-width: 900px) { 
     .one{ 
      display: none; 
     } 
    } 

Answer 2

Kế hoạch B: đặt DIV vào mỗi ô. Phân loại các DIV theo cột. Ẩn các DIV. Bạn có thể cần phải điều chỉnh cellpadding/cellspacing của bảng của bạn và đặt nó trên DIV .cell để duy trì sự xuất hiện trước đó.

<table> 
    <tr> 
     <td><div class='cell'></div></td> 
     <td><div class='cell collapsable'></div></td> 
     <td><div class='cell collapsable'></div></td> 
     <td><div class='cell'></div></td> 
    </tr> 
</table> 

Answer 3

Tôi nghĩ rằng ví dụ bạn có display:block và display:none đã được chuyển. Ngoài ra, tôi khuyên bạn nên sử dụng display: table-cell; thay vì display: block;, vì ô bảng là màn hình mặc định cho các phần tử <td>. CSS này có tác dụng đối với tôi và cũng là cách tiếp cận đầu tiên trên thiết bị di động:

td.collapsable {display:none; } 

@media only screen and (min-width: 450px) { 
    td.collapsable {display:table-cell; } 
} 

Answer 4

Giữ sạch HTML và đánh dấu bảng bằng cách sử dụng thứ n để ẩn cột. Nên làm việc với mọi trình duyệt hiện đại có hỗ trợ truy vấn phương tiện.

Dưới đây là một mẫu fiddle cho thấy nó hoạt động. Thay đổi kích thước ngăn kết quả để xem nó hoạt động.

https://jsfiddle.net/tycahill/xm0nwr7x

Các sạch HTML:

<table> 
    <tr> 
    <td>Column 1a</td> 
    <td>Column 2a</td> 
    <td>Column 3a</td> 
    </tr> 
    <tr> 
    <td>Column 1b</td> 
    <td>Column 2b</td> 
    <td>Column 3b</td> 
    </tr> 
</table> 

Các CSS để ẩn cột thứ hai:

@media only screen and (max-width: 800px) { 
    td:nth-child(2) { 
    display:none; 
    } 
}