更改表格中的一个单元格的宽度

Question

我以表格格式布置电子邮件，我的目标是调整“了解更多”而不调整其他行的大小。提供图片的效果：

。

我试着添加一个宽度属性，但它不起作用。

<table style="background-color: #a9cfee;"> 
    <tr style="border: none; font-family: arial, sans-serif; color:white; font-size: 43px; text-align: left; "> 
     <td> 
      <strong>ELITE GROOMING TUB</strong> 
     </td> 
     <td rowspan="3"> 
      <img src="tub.png"> 
     </td> 
    </tr> 
    <tr> 
     <td style="border: none; font-family: arial, sans-serif; color:white; font-size: 15px; text-align: left;"> 
      We have made our premium tub even better. Stairs are extra sturdy but lighter weight. With the flick of a foot, they slide underneath the tub. 
     </td> 
    </tr> 
    <tr> 
     <td style="border: none; font-family: arial, sans-serif; color:white; font-size: 15px; font-weight: 800; background-color: #0033a0; width: 50%;"> 
      Learn More 
    </tr> 
    </tbody> 
</table> 

Answer 1

现在我看到图像了，我完全修改了我的答案。

您的表格结构不会很好地显示您当前显示的方式。

例如，你有一个<td rowspan="3">的浴缸行。您需要添加第一行中两个单元格的宽度，以使流程更好。

该按钮还控制着表格的宽度。我把它放在单元格内的一个单独的表格中，这样你就可以控制按钮的宽度而不影响表格的宽度。

祝你好运。

<table style="background-color: #a9cfee;" border="1" width="580"> 
<tr style="border: none; font-family: arial, sans-serif; color:white; font-size: 43px; text-align: left; "> 
    <td width="80%"> 
     <strong>ELITE GROOMING TUB</strong> 
    </td> 
    <td rowspan="3" width="20%"> 
     <img src="tub.png"> 
    </td> 
</tr> 
<tr> 
    <td style="border: none; font-family: arial, sans-serif; color:white; font-size: 15px; text-align: left;"> 
     We have made our premium tub even better. Stairs are extra sturdy but lighter weight. With the flick of a foot, they slide underneath the tub. 
    </td> 
</tr> 
<tr> 
    <td align="center" style="font-family: arial, sans-serif; color:white; font-size: 15px; font-weight: 800; text-align:center;"> 

     <table align="center" border="0"> 
     <tr> 
      <td style="border: none; font-family: arial, sans-serif; color:white; font-size: 15px; font-weight: 800; background-color: #0033a0; width:200px; text-align:center;">Learn More</td> 
     </tr> 
     </table> 
    </td> 
</tr> 
</tbody> 

https://jsfiddle.net/wallyglenn/53ucukpo/