Question

好吧，据我所知，我在这里提出的问题是似乎没有一个易于解决的解决方案。也许我只是在喋喋不休地搜索和/或不理解我正在看/做的事情，但我真的找不到任何东西。

这基本上是适合移动设备的电子邮件模板的结构。要在移动设备上查看时允许所有内容成为单列，所有内容都需要收集到表中。不幸的是，众所周知，桌子自然不会延伸到邻居的高度。他们可以明确地压低下面的内容，但邻居无法与之匹敌。

显然，在正常结构下，这可以通过将所有内容构建为TR内部的TD来解决，但我向您展示的结构是强制性的，并且花了很长时间才能成为它。我没有太大的灵活空间（至少就我的高层而言），但如果解决方案需要进行一些密集的重组，我肯定会尝试看看它是如何工作的。

任何意见都深表赞赏，一个解决方案将获得千金Krugerands。

代码示例如下，更全面的示例here。

<!-- CONTENT CLOSE -->              
</td>
<!-- CONTENT WRAPPER CLOSE -->        
</tr>
</table>
<!-- COLUMN CLOSE -->       
</td>
</tr>
</table>

<!-- COLUMN -->
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; background-color: transparent;">
<tr >
<td border="0" cellpadding="0" cellspacing="0" style="width: 100%;  border: 0; padding: 0px; margin: 0px"> 

<!-- CONTENT WRAPPER -->    
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; vertical-align: top; background-color: #000;">
<tr >

<!-- CONTENT -->
<td border="0" cellpadding="0" cellspacing="0" style="padding: 0px; vertical-align: top; margin:0px;">

<!-- CONTENT CLOSE -->              
</td>
<!-- CONTENT WRAPPER CLOSE -->        
</tr>
</table>
<!-- COLUMN CLOSE -->       
</td>
</tr>
</table>

<!-- COLUMN -->
<table border="0" cellpadding="0" cellspacing="0"  valign="top" style="width: 50%; background-color: transparent; vertical-align: top; clear: left;" align="left">
<tr >
<td  valign="top" style="width: 100%;  border: 0; vertical-align: top; padding: 10px;" > 

<!-- CONTENT WRAPPER -->    
<table border="0" cellpadding="0" cellspacing="0"  style="width: 100%; vertical-align: top; background-color: #0e616d; " >
<tr >

<!-- CONTENT -->
<td style="padding: 10px; vertical-align: top; margin:0px; font-family: Tahoma, Geneva, sans-serif; color: #005c5b;">

<p style="margin: 0px; text-align: center; font-size: 72px;  font-family: Tahoma, Geneva, sans-serif; color: #24ccca; font-weight: bold;">LONG</p>
<p style="margin: 0px; text-align: center; font-size: 16px; color: #fff;">I'm dragging out this sentence so that I can provide a good example that properly illustrates the issue I'm having. I've also upped the font size because I really shouldn't be making this example so elaborate, but I'm kinda having fun.</p>

<!-- CONTENT CLOSE -->              
</td>
<!-- CONTENT WRAPPER CLOSE -->        
</tr>
</table>
<!-- COLUMN CLOSE -->       
</td>
</tr>
</table>




<!-- COLUMN -->
<table border="0" cellpadding="0" cellspacing="0"  valign="top" style="width: 50%; background-color: transparent; vertical-align: top;   " align="left">
<tr >
<td  valign="top" style="width: 100%;  border: 0; vertical-align: top; padding: 10px;" > 

<!-- CONTENT WRAPPER -->    
<table border="0" cellpadding="0" cellspacing="0"  style="width: 100%; vertical-align: top; background-color: #0e616d; " >
<tr >

<!-- CONTENT -->
<td style="padding: 10px; vertical-align: top; margin:0px; font-family: Tahoma, Geneva, sans-serif; color: #005c5b;">

<p style="margin: 0px; text-align: center; font-size: 72px;  font-family: Tahoma, Geneva, sans-serif; color: #24ccca; font-weight: bold;">SHORT</p>

<p style="margin: 0px; text-align: center; font-size: 16px; color: #fff;">See the column to the left for an explanation for why this column is so dang short.</p>

<!-- CONTENT CLOSE -->              
</td>
<!-- CONTENT WRAPPER CLOSE -->        
</tr>
</table>
<!-- COLUMN CLOSE -->       
</td>
</tr>
</table>


<!-- COLUMN -->
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; background-color: transparent;">
<tr >
<td border="0" cellpadding="0" cellspacing="0" style="width: 100%;  border: 0; padding: 0px; margin: 0px"> 

<!-- CONTENT WRAPPER -->    
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; vertical-align: top; background-color: #000;">
<tr >

<!-- CONTENT -->
<td border="0" cellpadding="0" cellspacing="0" style="padding: 0px; vertical-align: top; margin:0px;">

<!-- CONTENT CLOSE -->              
</td>
<!-- CONTENT WRAPPER CLOSE -->        
</tr>
</table>
<!-- COLUMN CLOSE -->       
</td>
</tr>
</table>



</td>
</tr>
</table>
</div>

Answer 1

我可以看到你制作的电子邮件模板。如果我是对的，最好的解决方案是创建正确的表，所以不要在表中嵌套表尝试使用带有colspans和rowspans的单个表来解决它：

<table>
<tr>
    <td colspan=4>cell</td>
  </tr>
  <tr>
    <td colspan=2>cell</td>
    <td colspan=2>cell</td>
  </tr>
  <tr>
    <td colspan=4>
    <table>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
    </table>
    </td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
  </tr>
</table>

还有一些css：

table {
  border-spacing: 2px;
}
td {
  background: #999;
  text-align: center;
}

table table {
  width: 100%;
  border-spacing: 2px;
}
table table td {
  width: 33%;
}

你只需要正确设计它应该没问题。

working example

更新：好吧，也许吧;它不是单独的桌子，但它有适当的结构。

制作并排表格匹配高度

1 个答案: