Làm thế nào để hiển thị một bảng thay đổi số cột dựa trên nếu điện thoại di động

Question

Tôi có một bảng như thế này ví dụ

| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |

Và trên điện thoại di động tôi chỉ muốn hiển thị các cột quan trọng như:

| 1 | 2 | 3 | 4 |

Tôi đã thử xem xét thiết kế đáp ứng nhưng tất cả những gì nó làm là sắp xếp lại toàn bộ bảng thay vì chỉ hiển thị một phần của bảng.

Tôi hiện đang sử dụng ionic sử dụng góc cạnh và tôi chưa thấy ai làm ví dụ như thế này trên stackoverflow.

Answer 1

Bạn sử dụng truy vấn phương tiện với giá trị chiều rộng tối đa và sau đó ẩn các ô bảng bằng lớp ẩn-di động;

.hide-mobile { 
 
    background: silver; 
 
} 
 
@media (max-width: 600px) { 
 
    .hide-mobile { 
 
    display: none; 
 
    } 
 
} 
 

 
div { 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    padding-bottom: 10px; 
 
    border-bottom: 1px solid red; 
 
    width: 600px; 
 
}

<div>If window is smaller then the width of this red line than the cells with the gray background disappear</div> 
 
<table> 
 
    <tr> 
 
    <td class="hide-mobile">Lorem ipsum dolor sit amet, consectetur.</td> 
 
    <td>Lorem ipsum dolor.</td> 
 
    <td>Corrupti, ipsum eligendi.</td> 
 
    <td>Nobis, placeat, aut?</td> 
 
    <td class="hide-mobile">Lorem ipsum dolor.</td> 
 
    <td>Lorem ipsum dolor.</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="hide-mobile">Veniam, commodi omnis voluptatem rem! Consectetur?</td> 
 
    <td>Lorem ipsum dolor.</td> 
 
    <td>Sed, esse, quidem.</td> 
 
    <td>Officiis repellat, cumque.</td> 
 
    <td class="hide-mobile">Maxime, et, blanditiis.</td> 
 
    <td>Tempore, molestias, totam.</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="hide-mobile">Reiciendis blanditiis voluptas tenetur possimus, quas.</td> 
 
    <td>Lorem ipsum dolor.</td> 
 
    <td>Eos, modi, illum!</td> 
 
    <td>Distinctio, iusto rerum!</td> 
 
    <td class="hide-mobile">Autem, ex, dolor.</td> 
 
    <td>Quae, quod, quasi.</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="hide-mobile">Ratione doloremque distinctio porro, explicabo voluptatibus.</td> 
 
    <td>Lorem ipsum dolor.</td> 
 
    <td>Quod, doloribus, accusantium!</td> 
 
    <td>Totam, voluptate, sapiente!</td> 
 
    <td class="hide-mobile">Quasi maiores, qui.</td> 
 
    <td>Dicta, labore, eum.</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="hide-mobile">Dolor harum eligendi, unde facere similique!</td> 
 
    <td>Lorem ipsum dolor.</td> 
 
    <td>Expedita, doloremque reprehenderit.</td> 
 
    <td>Quasi, alias, nemo.</td> 
 
    <td class="hide-mobile">Voluptatibus, quos, a!</td> 
 
    <td>Debitis, hic corporis!</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="hide-mobile">Recusandae ipsa repudiandae quod quaerat ducimus.</td> 
 
    <td>Lorem ipsum dolor.</td> 
 
    <td>Delectus, impedit, error.</td> 
 
    <td>Iste, illum, dicta.</td> 
 
    <td class="hide-mobile">Voluptatibus, autem, itaque!</td> 
 
    <td>Iure, error iusto.</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="hide-mobile">Explicabo ut qui deserunt laboriosam provident.</td> 
 
    <td>Lorem ipsum dolor.</td> 
 
    <td>Accusamus, neque, laborum.</td> 
 
    <td>Distinctio repudiandae, eaque!</td> 
 
    <td class="hide-mobile">Repellendus maiores, ipsa.</td> 
 
    <td>Quasi, vero, tenetur!</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="hide-mobile">Temporibus sapiente iusto quasi. Cupiditate, reprehenderit.</td> 
 
    <td>Lorem ipsum dolor.</td> 
 
    <td>Vero, libero sapiente?</td> 
 
    <td>Inventore, molestiae, ut!</td> 
 
    <td class="hide-mobile">Ipsam, molestias, iusto.</td> 
 
    <td>Nesciunt, ab recusandae.</td> 
 
    </tr> 
 
</table>

http://codepen.io/HerrSerker/pen/JREAgJ

Answer 2

Bạn có thể ẩn tất cả các cột sau thứ tư với CSS :nth-child như thế này:

td { 
 
    padding:1em; 
 
    background:red; 
 
} 
 
.mobile td:nth-child(1n+5) { 
 
    display:none 
 
}

<table><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></table> 
 

 
<table class="mobile"><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></table>

---

Ví dụ được thực hiện với một tên lớp chỉ để nhìn thấy nó làm việc trên các đoạn, về vấn đề thực tế của bạn, bạn có thể sử dụng một đoạn mã bên trong truy vấn phương tiện truyền thông của bạn để ẩn các cột như:

@media (max-width:560px) { 
    table td:nth-child(1n+5) { 
    display:none 
    } 
}