Question

我最近正在练习HTML电子邮件，我在使用表时遇到了一些麻烦。目前，<td>的内容大于<td>本身。

那么如何让td根据其内容调整其大小呢？我觉得此电子邮件中其他td的工作正常正好。请注意，给我带来麻烦的是一个<a>我已经给了一些填充样式作为按钮。

＆＃13;

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td style="width: 45%;">
      <table border="1" cellspacing="0" cellpadding="0" style="padding: 10px 10px 10px 10px;">
        <tr>
          <td>
            <img src="house1.jpg" width="300" height="200">
          </td>
        </tr>

        <tr>
          <td align="center">
            <h6 style="font-size: 16px; font-weight: 900; margin: 0; padding: 10px 10px 10px 10px;">Modern House of such style</h6>

            <p style="font-size: 14px; font-weight: 400; margin: 0; padding: 0 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis.</p>
          </td>
        </tr>

        <tr>
          <td align="center">
            <a href="#" style="text-decoration: none; color: #ffffff; display:inline-block; padding: 10px 20px 10px 20px; background-color: #f95965">CLICK HERE</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

＆＃13;

最后 td 是给我带来麻烦的。有什么想法吗？

Answer 1

对display:block;或display:inline-block等内容使用显示属性，请查看此示例

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
   <tr>
     <td style="width: 45%;">
	 <table border="1" cellspacing="0" cellpadding="0" style="padding: 10px 10px 10px 10px;">
	<tr>
	  <td>
	  <img src="house1.jpg" width="300" height="200">
	  </td>
	</tr>

	<tr>
	   <td align="center">
	   <h6 style="font-size: 16px; font-weight: 900; margin: 0; padding: 10px 10px 10px 10px;">Modern House of such style</h6>
           <p style="font-size: 14px; font-weight: 400; margin: 0; padding: 0 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis.</p>
	</td>
	</tr>

	<tr>
	  <td align="center">
	  <a href="#" style="text-decoration: none; color: #ffffff; padding: 10px 20px 10px 20px; background-color: #f95965;display: inline-block;">CLICK HERE</a>
	  </td>
	</tr>
                    
</body>
</html>

＆＃13;

如何掩盖其内容的高度

1 个答案: