Блог

В настоящее время у меня проблема с адаптивностью моей таблицы HTML.

У меня есть таблица html, в которой у меня есть 4 столбца, каждый шириной 25%. На рабочем столе таблица выглядит великолепно.

В первом столбце 10 строк, в каждой строке есть текст описания. Следующие 3 столбца — это столбцы продукта, где в каждом из них есть продукт с некоторой информацией о нем.

Поскольку я не могу показать столько столбцов на мобильном телефоне, я бы хотел, чтобы на моем мобильном телефоне отображался только первый столбец (описание) столбец продукта. Потому что в противном случае люди не знают, что означает информация в столбце продукта.

Я надеюсь, что кто-нибудь сможет мне помочь, спасибо!

Я уже составил таблицу с помощью CSS и попытался сделать каждый столбец 50% на мобильных телефонах. Но проблема в том, что первый столбец должен отображаться рядом с каждым столбцом продукта.

Вот что у меня уже есть:

   <table>
    <thead>
    <tr>
    <th class="col-25">Preview</th>
    <th class="col-25">Product 1</th>
    <th class="col-25">Product 2</th>
    <th class="col-25">Product 3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <th class="col-25">Description</th>
    <td class="col-25">Product name 1</td>
    <td class="col-25">Product name 2</td>
    <td class="col-25">Product name 3</td>
    </tr>
 <tr>
    <th class="col-25">Price</th>
    <td class="col-25">Product price 1</td>
    <td class="col-25">Product price 2</td>
    <td class="col-25">Product price 3</td>
    </tr>
</tbody>
</table>
  

CSS:

 .table {
    width: 100%;
    border-collapse:collapse;
    table-layout: fixed;
}
.col-25 {
    width: 25%;
}
  

Хорошо, это довольно сложно, но у меня есть несколько решений для вашей проблемы.

1. Попробуйте использовать точки останова CSS

   Если ваше устройство достигает определенной ширины, вы скрываете следующие столбцы.

   https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp

2. Используйте Bootstrap

   В Bootstrap уже встроены точки останова. Вы могли бы создать свою таблицу с помощью их фантастической системы grid.

   https://getbootstrap.com/docs/4.3/getting-started/introduction/

   https://getbootstrap.com/docs/4.1/layout/grid/

Если бы вы опубликовали свой пример, я мог бы рассмотреть его подробнее, но я думаю, что эти два совета должны дать вам представление о том, как вы можете решить эту проблему самостоятельно.

(Извините за мой плохой английский)