Question

免责声明：我通常不会使用表格进行布局，但它们似乎是html电子邮件的最佳选择。相信我，玩divs 在电子邮件中糟透了。我正在寻找最好的解决方法，我对如何设计没有太多限制......

我差不多了，但我遇到以下代码的问题：

<table border=1 width="600px">
  <tbody>
    <tr height="140px">
      <td width="210px"></td>
      <td width="180px"></td>
      <td width="210px"></td>
    </tr>
    <tr height="200px">
      <td colspan="3"></td>
    </tr>
    <tr height="100px">
      <td colspan="3"></td>
    </tr>
    <tr height="300px">
      <td width="300px"></td>
      <td></td>
    </tr>
  </tbody>
</table>

jsfiddle

我的具体问题是最后一个单元格，我希望它们将表格的空间分成50％。

正如你所看到的，我将最后<td>的宽度修改为300px（表的一半），但这也修改了第一个单元格的宽度，这是一个不希望的结果，我想要前三个td保持210px，180px，210px的比例。

以防万一更清楚这里是草图：

enter image description here

Answer 1

如果你必须使用一个表 - 除非你正在替换表格数据，否则你真的不应该这样做 - 那么在我看来，这里的解决方案是将顶行放在一个单元格中并在其中嵌套另一个表格，如根据需要增加许多单元格宽度。所以：

<table>
<tr><td colspan="2">
    <table><tr>
        <td width="210"></td>
        <td width="180"></td>
        <td width="210"></td>
    </tr></table>
</td></tr>
<tr><td colspan="2"></td></tr>
<tr><td colspan="2"></td></tr>
<tr><td width="50%"></td><td width="50%"></td></tr>
</table>

Answer 2

你不能用一张桌子做这件事。列将始终排列。如果这是一个其他内容的布局，那么你真的需要看看基于div的布局。

如果必须使用表格：

<table border=1 width="600px">
    <tbody>
        <tr height="140px">
            <td width="210px"></td>
            <td width="180px"></td>
            <td width="210px"></td>
        </tr>
        <tr height="200px">
            <td colspan="3"></td>
        </tr>
        <tr height="100px">
            <td colspan="3"></td>
        </tr>
        <tr height="300px">
            <td colspan="3">
                <table>
                    <tr>
                        <td width="300"></td>
                        <td width="300"></td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>

Answer 3

创建一个表，其中每列代表每个可能的除法，然后大量使用colspans。所以你可以在210,300,490和＆amp ;; 600总共4列。

然后你希望第一行跨越1,2,1，所有全长跨越4，然后是一半跨越2和2。

Answer 4

DIV将是更好的解决方案。你确定你需要一张桌子吗？也许，divs？

如何创建一个包含3,2和1列的表来填充整个表？

4 个答案: