の内容の高さをカバーする方法

最近、HTMLの電子メールを練習しています。テーブルを使用していくつか問題が発生しました。現在、<td>のコンテンツは<td>よりも大きいです。の内容の高さをカバーする方法

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私にいくつかのトラブルを与えるものです。何か案は？

出典

2017-02-23 Óscar Aguayo

問題があなたの 'td'ではない、それは'デフォルトでA'要素が 'inline'であるということですブロック要素と同じ方法でパディングプロパティを使用しないでください。あなたの 'a'要素に' display：inline-block; 'を追加してください。 – haxxxton

完了しました。どうもありがとうございました。 –

display:block;またはdisplay:inline-blockチェックなどの利用コンテンツの表示プロパティをこの例

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Page Title</title> 
 
</head> 
 
<body> 
 
<table border="0" cellpadding="0" cellspacing="0"> 
 
    <tr> 
 
    <td style="width: 45%;"> 
 
\t <table border="1" cellspacing="0" cellpadding="0" style="padding: 10px 10px 10px 10px;"> 
 
\t <tr> 
 
\t <td> 
 
\t <img src="house1.jpg" width="300" height="200"> 
 
\t </td> 
 
\t </tr> 
 

 
\t <tr> 
 
\t <td align="center"> 
 
\t <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> 
 
\t </td> 
 
\t </tr> 
 

 
\t <tr> 
 
\t <td align="center"> 
 
\t <a href="#" style="text-decoration: none; color: #ffffff; padding: 10px 20px 10px 20px; background-color: #f95965;display: inline-block;">CLICK HERE</a> 
 
\t </td> 
 
\t </tr> 
 
        
 
</body> 
 
</html>

出典

2017-02-23 04:49:40

​​の内容の高さをカバーする方法

答えて

関連する問題

の内容の高さをカバーする方法