2017-05-08 80 views
0

我以表格格式佈置電子郵件,我的目標是調整「瞭解更多」而不調整其他行的大小。提供圖片的效果:更改表格中的一個單元格的寬度

MOCK-UP

我試着添加一個寬度屬性,但它不起作用。

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

回答

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/

+1

是的,這是要走的路。保持你的外部'

'爲全寬,然後在第二個更窄的'
'處爲按鈕設置。 –

相關問題