html - 我在父表中有两个表，如何使它们具有相同的宽度？

问题描述

这是我目前的情况：如下图所示的JSFiddle

--------------------------------------------------
// table0
     ---------------------------
     |                         |
                word           |
     |                         |
     |                         |
     ---------------------------
// table1
 ------------------------------------
 |                                  |
 |                                  |
 |                                  |
 ------------------------------------
--------------------------------------------------

我想要这样的东西

outer table
------------------------------------------------------
// table0
 ------------------------------------
 |                                  |
 |                                  |
 |                                  |
 ------------------------------------
// table1
 ------------------------------------
 |                                  |
 |                                  |
 |                                  |
 ------------------------------------
------------------------------------------------------

我的意思是让两张桌子的宽度相同

编辑：Fixed with 不是理想的解决方案，因为用户也可以从手机上看到这一点。无论是从移动设备还是桌面设备上看，我都必须具有一定的灵活性

编辑：由于一些评论，我在这里复制代码

<head>
    <style type="text/css">

        body {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 16px;
            background-color: green;
        }

        .containerTitleTable {
            padding: 0px;
            cellpadding: 0px;
            background-color: gray;
        }


        .containerBodyTable {
            border-radius: 30px;
            background-color: #F8F7FC;
        }

    </style>
</head>

<body>
    <table id="backgroundTable" align="center" >
        <tr>
            <td>
                <table id="titleTable" align="center" class="containerTitleTable" cellpadding="0">
                    
                    <tr align="center"> 
                        <td bgcolor="#F2EDF9" >
                            <p>
                                <h4>
                                    <span >!Bienvenid@, [[${nombre}]]</span>
                                </h4>
                            </p>
                        </td>
                    </tr>

                </table>


            </td>
        </tr>
        <tr>
            <td>
                <table id="bodyTable" class="containerBodyTable" >


                    <tr align="center">
                        <td >
                            <p>
                                <h1>
                                    <span >!Bienvenid@, [[${nombre}]]</span>
                                </h1>
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

</body>

标签： htmlcss

html - 我在父表中有两个表，如何使它们具有相同的宽度？

问题描述

解决方案

推荐阅读