html – 如何覆盖其内容的高度

2023年4月28日 129次阅读

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

那么你如何根据其内容调整其大小？我觉得这封电子邮件的其他部分工作得很好.请注意,给我带来麻烦的是< a>我已经给了一些填充样式作为按钮.

<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>

这最后一个td是给我一些麻烦的.有任何想法吗？

最佳答案 对显示内容使用显示属性：block;或显示：内联块检查此示例

<!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>
点赞