将所有 DIV 元素更改为 TABLE、TR、TD 及其属性

Question

I have a code completely written with DIV based structure. There is a problem with this div based structure when it is rendered in EMAIL. The alignment is not the same in all EMAIL clients. So I was trying to convert all the DIV based structure to TABLE structure.

Here goes the actual code

<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>

I expect the above code to get converted as below

<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>

Can someone please help me in this.

Answer 1

You can let the div element behave like table using css.
display:table -for table
display:table-cell -for column
display:table-row -for row