3

免责声明：我通常不使用表格进行布局，但它们似乎是 html 电子邮件的最佳选择。相信我，在电子邮件中玩 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 width="300px"></td>
      <td></td>
    </tr>
  </tbody>
</table>

jsfiddle

我的具体问题是最后一个单元格，我希望他们将表格的空间分别划分为 50%。

如您所见，我将最后<td>一个单元格的宽度修改为 300px（表格的一半），但这也修改了第一个单元格的宽度，这是不希望的结果，我希望前三个td保持 210px、180px、210px部分。

为了以防万一，这里有一个草图：

在此处输入图像描述

4

4 回答 4

3

如果您必须使用表格 - 除非您正在显示表格数据，否则您真的不应该使用表格 - 那么在我看来，这里的解决方案是让第一行成为一个单元格并在其中嵌套另一个表格，单元格宽度一样多根据需要。所以：

<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>
于 2012-10-25T02:35:23.173 回答
1

创建一个表，其中每列代表每个可能的划分，然后自由地使用 colspan。因此，总共 4 列可能会在 210、300、490 和 600 处中断。

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

于 2012-10-25T02:41:55.303 回答
1

你不能用一张桌子做到这一点。列将始终排列。如果这是针对其他内容的布局，那么您确实需要查看基于 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>
于 2012-10-25T02:30:04.267 回答
-1

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

于 2012-10-25T02:28:12.020 回答