Question

我正在尝试创建一个电子邮件模板，其中我将显示一个包含3个图标的网格。 1行3个图标。

目前我有以下标记：

<table bgcolor="red" width="600" cellspacing="0" cellpadding="0" border="0" class="outerContainer">
<tr>
   <td>
       <table bgcolor="yellow" width="100%" cellspacing="0" cellpadding="0" border="0">
           <tr>
               <td bgcolor="green" align="center">
                    <table cellspacing="0" cellpadding="10" border="0">
                        <tr>
                            <td>
                                ICON 1
                            </td>
                        </tr>
                    </table>
               </td>
               <td bgcolor="green" align="center">
                    <table cellspacing="20" cellpadding="10" border="0">
                        <tr>
                            <td>
                                ICON 2
                            </td>
                        </tr>
                    </table>
               </td>
               <td bgcolor="green" align="center">
                   <table cellspacing="0" cellpadding="10" border="0">
                        <tr>
                            <td>
                                ICON 3
                            </td>
                        </tr>
                    </table>
               </td>
           </tr>
       </table>
   </td> 
</tr>

然而，我正在努力......我想做的只是在中间容器上添加间距，让外部容器接触边缘。我一直在尝试使用cellspacing，但每次使用它都会增加所有细胞周围的间距。

因此，ICON 2的左右间距会有所不同，但其他的则保持不变。希望这是有道理的！

有人可以就实现这一目标的最佳途径提出建议吗？

Answer 1

我会说它在所有单元格周围添加间距的原因是因为你的表格宽度。在没有指定宽度的情况下，该表将使列尽可能均匀地分隔600px。

我可能会从图标1和3的内部表中删除所有填充，并在width容器上设置1 td。这样，它们将默认为其内容的大小，而您的中间单元格将是剩下的内容。

有点hacky，但是在创建电子邮件应用程序中保持一致的电子邮件时经常需要这样的蠢事（感谢Outlook！）。

<table bgcolor="red" width="600" cellspacing="1" cellpadding="0" border="0" class="outerContainer">
<tr>
   <td>
       <table bgcolor="yellow" width="100%" cellspacing="1" cellpadding="0" border="0">
           <tr>
               <td bgcolor="green" align="center" width="1">
                    <table cellspacing="0" cellpadding="0" border="0">
                        <tr>
                            <td>
                                ICON 1
                            </td>
                        </tr>
                    </table>
               </td>
               <td bgcolor="green" align="center">
                    <table cellspacing="20" cellpadding="0" border="0">
                        <tr>
                            <td>
                                ICON 2
                            </td>
                        </tr>
                    </table>
               </td>
               <td bgcolor="green" align="center" width="1">
                   <table cellspacing="0" cellpadding="0" border="0">
                        <tr>
                            <td>
                                ICON 3
                            </td>
                        </tr>
                    </table>
               </td>
           </tr>
       </table>
   </td> 
</tr>

Answer 2

只是澄清一下，这是你想要实现的目标：

可能只是没有底部的黄色部分。

Answer 3

这个问题有点不清楚，但这是你想要实现的目标吗？

用以下内容替换您对包含ICON 2的td的当前内容：

<td style="padding: 0 100px">
    ICON 2
</td>

此外，删除cellpadding＆amp;您已在代码中应用的cellspacing属性。

Answer 4

这是在内部两个单元格周围添加间距的方法。我添加了CSS来展示它的外观。中间td的填充为10px（左右）。这个数字可以增加到你想要的数量。

＆＃13;

<table bgcolor="red" width="600" cellspacing="0" cellpadding="0" border="0" class="outerContainer">
<tr>
   <td>
       <table bgcolor="yellow" width="100%" cellspacing="0" cellpadding="0" border="0">
           <tr>
               <td bgcolor="green" align="center">
                    <table cellspacing="0" cellpadding="10" border="0">
                        <tr>
                            <td>
                                ICON 1
                            </td>
                        </tr>
                    </table>
               </td>
               <td bgcolor="green" align="center" style="padding:0px 10px;">
                    <table cellspacing="20" cellpadding="10" border="0">
                        <tr>
                            <td>
                                ICON 2
                            </td>
                        </tr>
                    </table>
               </td>
               <td bgcolor="green" align="center">
                   <table cellspacing="0" cellpadding="10" border="0">
                        <tr>
                            <td>
                                ICON 3
                            </td>
                        </tr>
                    </table>
               </td>
           </tr>
       </table>
   </td> 
</tr>
</table>

＆＃13;

   var taskTypes = {};


    $(".task_types_tags_category").each(function () {
        var name = $(this).attr("name");
        name = name.replace("[]","");
        var typeId = $(this).val();
        var currentTagsCount =0;
        var currentTags = [];
       if($(this).is(":checked")){
           taskTypes[typeId]={};
           taskTypes[typeId]=[typeId];
       }
       $('input[name="'+name+'[task_types_tags][]"]').each(function () {
            if($(this).is(":checked")){
                currentTags.push($(this).val());
                ++currentTagsCount;
            }
        });
       if(currentTagsCount >0){
           taskTypes[typeId]={};
           taskTypes[typeId]=[typeId];
           taskTypes[typeId]["tags"]={};
           taskTypes[typeId].tags = currentTags;
       }
    });

    console.log(taskTypes);

＆＃13;

如果这对您不起作用，那么您可以在中间单元格内的表格中添加填充。

希望以上有所帮助。

为表

4 个答案: