Как изменить порядок столбцов таблицы для мобильных устройств - PullRequest
Новая
       7

Как изменить порядок столбцов таблицы для мобильных устройств

3 голосов
/ 03 июня 2019

Я редактирую рассылку для клиента, и я застрял на этом ...

Вот пример моей таблицы

https://jsfiddle.net/xocrqwLs/

и проблема в том, что мобильное устройство выглядит следующим образом 

|---------|
| [image] |
|  text   |
|---------|
|  text   |
| [image] |
|---------|

, и я хочу, чтобы оно выглядело так 

|---------|
| [image] |
|  text   |
|---------|
| [image] |
|  text   |
|---------|

Как изменить столбец таблицы для мобильных устройств?

Спасибо!

Ответы [ 3 ]

1 голос
/ 03 июня 2019

Вы не можете изменить порядок отображения двух элементов, если не используете flexbox (таблицы имеют display: table, а не display: flex);Более того, поведение таблиц очень строго и в любом случае не допускает такой гибкости, а совместимость с платформой электронной почты не позволяет заменять таблицы на flexbox без серьезных проблем совместимости.

На вашем месте я бы добавил еще один элемент tdс «lorem ipsum» после того, который содержит изображение: тогда вы можете скрыть то или другое с медиа-запросами.

0 голосов
/ 03 июня 2019

Если вы используете загрузчик, вы можете использовать «скрытый» и «видимый» свойства экрана.

Например:
- Создайте две версии своего стола: одну для больших экранов и одну для мобильных.
- На больших экранах используйте скрытое, чтобы скрыть маленькую экранную версию, и видимое, чтобы сделать большой экран видимым.
- На экранах мобильных устройств используйте скрытую, чтобы скрыть версию на большом экране, и видимую, чтобы сделать мобильную версию таблицы видимой.

Этот вопрос подробно описывает, как это работает для Bootstrap 3 и Bootstrap 4: Скрытие элементов в адаптивном макете?

Подробнее о том, как это работает в Bootstrap 4: Отсутствует видимое - ** и скрытое - ** в Bootstrap v4

0 голосов
/ 03 июня 2019 

table.info tr {
  display: flex;
  flex-direction: column;
  width: 100%;
}

table.info tr td,
table.info,
table.info tbody {
  display: block;
  width: 100%;
}
<table class="info">
  <th>
    <tr>
      <td>
        <img src="https://via.placeholder.com/150/0000FF/FFFFFF/?text=Digital.com">
      </td>
      <td>
        Lorem Ipsum dolor
      </td>
    </tr>

    <tr>
      <td>
        <img src="https://via.placeholder.com/150/0000FF/FFFFFF/?text=Digital.com">
      </td>
      <td>
        Lorem Ipsum dolor
      </td>

    </tr>
  </th>
</table>
...