Question

我有一个HTML简报表，用于构建我想要水平边框的内容。不知何故，根据表格宽度，水平边框的宽度始终为100％。如何在其左右两侧实现20px填充？

HTML

<table border="1" cellpadding="0" cellspacing="0" align="center" width="400">         
<tr>
    <td >Banana
    </td>
</tr> 
<tr style=" padding: 0 20px 0 20px;">
    <td style=" padding: 0 20px 0 20px; border-bottom: 3px solid red;">
    </td>
</tr>
<tr>
    <td >Apple
    </td>
</tr>    
</table>

Answer 1

您无法在当前代码中执行您想要的操作

你需要做一些技巧看到这个

<table border="0" cellpadding="0" cellspacing="0" align="center" width="400">         
    <tr>
        <td >Banana
        </td>
    </tr> 
    <tr >
        <td> <hr  style=" border:0px; margin: 0 20px 0 20px; border-bottom: 3px solid red;">
        </td>
    </tr>
    <tr>
        <td >Apple
        </td>
    </tr>    
</table>

我在第二个表格行中使用了（HR）标记，这将解决您的问题☺

Answer 2

边框不会考虑填充，但它会使用边距。请参阅CSS Box Modell以供参考。

Answer 3

在CSS上，有级联。它解析顶级和特定覆盖一般

Answer 4

有很多方法可以实现您的目标（包括我们必须更改HTML代码的方式）。假设您要保留表格布局。您可以像这样设置中间border-left的{{1}}和border-right：

td

<强> HTML ：

tr.hr > td {
  border:none;
  border-left:20px solid white;
  border-right:20px solid white;    
  background:red;
  height:3px;
}

Demo.

请注意，<tr> <td> Banana </td> </tr> <tr class='hr'> <td></td></tr> <tr> <td> Apple </td> </tr>和border-left的颜色应与表格的背景颜色相同。（他们在演示中都是border-right。

Answer 5

请查看HTML电子邮件样板文件。 http://htmlemailboilerplate.com/#f1
使用CSS限制：http://www.campaignmonitor.com/css/。它解决了与ie有关的问题。间隔和电子邮件客户端呈现问题（Gmail，Outlook，Yahoo，...）
HTML电子邮件需要尊重600px宽度，因为它是预览的默认值。
要测试HTML电子邮件（如果测试服务器上没有配置邮件），您可以使用http://putsmail.com/同时检查智能手机，因为很多人倾向于阅读邮件

您可以使用3个单元格的组合来实现效果，其中第一个和最后一个使用间隔物和中间可以是红色纯色gif。

    <table cellpadding="0" cellspacing="0" border="0" align="center">
        <tr>
            <td valign="top" width="20"><img width="20" height="3" src="transparent.gif" alt="" /></td>
            <td valign="top" width="560">
                <img src="red.gif" width="560" height="3" alt="" />
            </td>
            <td valign="top" width="20"><img width="20" height="3" src="transparent.gif" alt="" /></td>
        </tr>
    </table>

HTML - 如何将填充应用于水平边框？

5 个答案:

Demo.