Как перестроить две строки с тремя ячейками в три строки с двумя ячейками?

Question

[PluckyPixie]

Верстаю письмо. В десктопной версии должно быть три ячейки с товарами в строке, под ними - еще одна строка с тремя товарами. На мобильном все это должно перестраиваться следующим образом: товары становятся по 2 шт в три строки. Сломала голову, как же такое провернуть в табличной верстке. Верстать НЕ таблицами сердечно прошу не предлагать: в верстке ПИСЕМ такой подход не подойдет.
Нашла только один выход, и весьма корявый: делать еще одну третью строку на десктопе с двумя ячейками, скрывать ее и показывать только на мобилке. На мобилке скрывать третьи ячейки из первых двух строк.
Подскажите, может, существует более оптимальный способ?

Answer 1

[PluckyPixie]

Решила вопрос следующим образом:
делаю три отдельные таблицы внутри одной большой. В каждой таблице всего одна строка с одной ячейкой, в ячейке два span со свойством display: block.
Так визуально у нас получается будто бы две строки по 3 ячейки в каждой.
На мобильном через медиа-запросы задаем адаптивность для каждой таблицы (чтобы она занимала 100% ширины) и для каждого span-а такие параметры:
display: inline-block;
width: 130px; (тут ширину можно взять произвольно, просто именно с такой в моем случае на экране мобильного оба блока помещаются в одну строку и не перестраиваются друг под друга).
Плюс задаем нужные нам отступы, что блоки не прилипали друг к другу.

Спасибо всем, кто откликнулся и предложил свои варианты!

Answer 2

[snap44]

https://getinstance.info/articles/css/responsive-t...

Comments

[PluckyPixie]

Решение интересное, и, возможно, пригодится в будущем, спасибо!
В данной конкретной ситуации не сильно отличается от предложенного мною выше: часть блоков скрывается, другая часть (в данном случае через псевдо-элементы) становится видимой. Когда речь идет о карточках товара, так делать не очень удобно, а с использованием псевдо-элементов и вовсе невозможно, так как речь идет не об одной текстовой строке, а нескольких, плюс картинка и кнопка.

Answer 3

[Руслан Минулин]

Попробуй флексами таблицу для десктопной версии сделать и потом через media width: 740px, флексами прописать мобильную версию.

Answer 4

[Михаил]

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

<tr>
    <td>
        1-ая колонка
    </td>
    <td>
        2-ая колонка
    </td>
    <td>
        3-ая колонка
    </td>
<!--[if (gte mso 9)|(IE)]>
</tr>
<tr>
<![endif]-->
    <td>
        4-ая колонка
    </td>
    <td>
        5-ая колонка
    </td>
    <td>
        6-ая колонка
    </td>
</tr>