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

时间:2019-04-25 05:43:02

标签: javascript jquery html css angular

我有一个完全用基于DIV的结构编写的代码。在EMAIL中呈现时,此基于div的结构存在问题。在所有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>

有人可以帮我吗?

1 个答案:

答案 0 :(得分:0)

您可以使用CSS让div元素的行为类似于表。
显示:表格-用于表格
display:table-cell -用于列
display:table-row -for row