CODEWITHSUNDEEP
htmlcsshtml-table
Óscar Aguayo
Óscar Aguayo

Reputation: 149

How to make a <td> cover the height of its content

I am practicing HTML emailing lately and I have come up with some trouble using tables. Right now, the content of a <td> is bigger than the <td> itself.

So how do you make a td adjust its size according to its content? I feel like the rest of the td's on this email worked just fine. Notice that what is giving me trouble is an <a> to which I have given some padding to style as a button.

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

This last td is the one giving me some trouble. Any ideas?

Upvotes: 4

Views: 1723

Answers (1)

Umang Patwa
Umang Patwa

Reputation: 2965

Use Display property for content like display:block; or display:inline-block check this example

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

Upvotes: 2

Related Questions