Изменить все элементы DIV на TABLE, TR, TD с его атрибутами

Question

У меня есть код, полностью написанный со структурой на основе DIV. Существует проблема с этой структурой на основе div, когда она отображается в EMAIL. Выравнивание не одинаково для всех клиентов EMAIL. Поэтому я пытался преобразовать всю структуру на основе DIV в структуру TABLE.

Здесь идет фактический код

<div class="layoutContainer" style="width: 880px; height: 700px; background: rgb(255, 255, 255);">
    <div class="contentInside" style="transform: translate(0px, 0px); width: 260px; left: 0px; top: 0px;">
        test content1
    </div>
    <div class="contentInside" style="transform: translate(-375px, 0px); width: 394px; left: 399px; top: 0px;">
        test content2
    </div>
</div>

Я ожидаю, что приведенный выше код будет преобразован, как показано ниже

<table class="layoutContainer" style="width: 880px; height: 700px; background: rgb(255, 255, 255);">
    <tr> 
        <td>
            <table class="contentInside" style="transform: translate(0px, 0px); width: 260px; left: 0px; top: 0px;">
                <tr>
                    <td>
                        test content1
                    </td>
                </tr>
            </table>
            <table class="contentInside" style="transform: translate(-375px, 0px); width: 394px; left: 399px; top: 0px;">
                <tr>
                    <td>
                        test content2
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Может кто-нибудь, пожалуйста, помогите мне в этом.

Answer 1

Вы можете позволить элементу div вести себя как таблица, используя css.
display: table - для таблицы
display: cell-cell - для столбца
дисплей: таблица-строка -для строки