Css 增加外部表格宽度的嵌套表格

我有一个嵌套表，如下所示：

<table border="0" width="750" cellspacing="0" cellpadding="0">
  <tr align="center">
     <td width="530">
         <table border="0" cellspacing="0" cellpadding="0" width="530">
             <tr>
                 <td>
                   <tr>
                            <td width="14"></td>
                            <td width="177">
                                <p style="color:#333333; line-height: 20px; font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight:bold; text-align: left; margin-left: 0px; padding-top: 0px;">Expand Your Reach</p>
                                <ul style="color:#767676; line-height: 20px; font-size: 12px; font-family: Helvetica, Arial, sans-serif; list-style-image:url(http://demo.frostmiller.com/sss104/images/bullet.jpg);text-align:left; margin-left: 25px; padding:0; list-style-position:outside;">
                                    <li>Contrary to popular belief, Lorem Ipsum is not simply random text. </li>
                                    <li>Contrary to popular belief, Lorem Ipsum is not simply random text. </li>
                                    <li>Contrary to popular belief, Lorem Ipsum is not simply random text. </li>
                                </ul>
                                <br />
                            </td>
                            <td width="29"></td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <hr width="220" />
                            </td>
                        </tr>
                        <tr>
                            <td width="14"></td>
                            <td width="177" align="left">
                                <p style="color:#333333; line-height: 20px; font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight:bold; text-align: left;">Contact Info</p>
                                <p style="color:#767676; line-height: 20px; font-size: 12px; font-family: Helvetica, Arial, sans-serif; text-align: left; margin-bottom: 2cm;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer  .</p>
                            </td>
                            <td width="29"></td>
                        </tr>
                </td>
             </tr>
         </table>
     </td>
     <td width="220">
     </td>
  </tr>
</table>

扩展您的范围


与流行的观点相反，Lorem Ipsum不是简单的随机文本
与流行的观点相反，Lorem Ipsum不是简单的随机文本
与流行的观点相反，Lorem Ipsum不是简单的随机文本




Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪一台未知的打印机问世以来，Lorem Ipsum一直是业界标准的虚拟文本

我正在创建一封html电子邮件，因此除了嵌套表之外别无选择

这里，只要我将宽度为530的内表包含在宽度为530的单元格中，外表的边框就会错位并加宽。我怎样才能阻止这一切

您的HTML无效，表嵌套错误（其中有额外的

tr

和

td

元素）

数学运算不累加，所以很难计算出你在做什么，嵌套的表是

14+177+29=220

，但它在

530

单元格中

如果您修复嵌套并更改

<td width="530">
   <table border="0" cellspacing="0" cellpadding="0" width="530">

致：

它应该修复仍然存在的任何对齐问题

---

将

colspan=“4”

添加到包含嵌套

的外部

尝试将以下css添加到外部表：

table-layout: fixed;

它不允许外部表的宽度超过设置的宽度值。例如：

表格{
边界塌陷：塌陷；
}
运输署{
填充：10px；
}
.外桌，.外桌td{
边框：1px纯绿色；
}
.外桌{
宽度：300px；
/*不允许外部表格的宽度大于设定值（300px）*/
表布局：固定；
}
.内桌{
/*宽度大于外桌的宽度*/
宽度：500px；
}
.内表，.内表td{
边框：1px纯红；
}
.内部表父级{
/*允许滚动嵌套表*/
溢出-x：自动；
}

外表的第一列
外部表的第二列，嵌套表的宽度大于外部表的宽度
内表的第一列
内表的第二列

不嵌套表将是一个良好的开端。我从未见过嵌套表正确描述数据结构的情况。同意@David的说法。您希望如何显示数据？我无法用您提供的代码复制此问题。除了列表标记，我也看不到任何图像。但是，如果您包含其他图像，请确保它们不比您试图放置它们的列宽。您好，san4o，欢迎使用SO！代码片段很棒，但总的来说，我不确定您想要实现什么。你能详细说明一下预期的结果吗？

table-layout: fixed;