Question

我有一个嵌套表：

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

我正在创建一个html电子邮件，因此没有其他选择，只能嵌套表。

这里，只要在宽度为530的单元格中包含宽度为530的内部表格，外部表格的边框就会变得不对齐并变宽。我怎么能阻止这个？

Answer 1

您的HTML无效，表格被错误地嵌套（其中有额外的tr和td元素）
数学没有加起来因此很难弄清楚你在做什么，嵌套表是14+177+29 = 220但是你在530单元格中
< / LI>

如果您修复了嵌套并更改了

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

到：

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

它应该解决仍然存在的任何对齐问题

Answer 2

将colspan="4"添加到包含嵌套<td>的外部<table>。

Answer 3

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

table-layout: fixed;

不允许外部表宽于width的设置值。示例：

table {
  border-collapse: collapse;
}
td {
  padding: 10px;
}
.outer-table, .outer-table td {
  border: 1px solid green;
}
.outer-table {
  width: 300px;
  /* Don't allow outer table to have width bigger than the set value (300px) */
  table-layout: fixed;
}
.inner-table {
  /* The width is bigger than the width of the outer table */
  width: 500px;
}
.inner-table, .inner-table td {
  border: 1px solid red;
}
.inner-table-parent {
  /* Allow to scroll nested table */
  overflow-x: auto;
}

<html>
<body>
<table class="outer-table">
  <tr>
    <td>First column of outer table</td>
    <td class="inner-table-parent">
      <div>Second column of outer table with a nested table having width bigger that the outer</div>
      <table class="inner-table">
        <tr>
          <td>First column of inner table</td>
          <td>Second column of inner table</td>
        </tr>
      </table>
      </td>
  </tr>
</table>
</body>
</html>

嵌套表增加外部表的宽度

3 个答案: