CODEWITHSUNDEEP
htmlhtml-tablepaddingborder-spacing
user977101
user977101

Reputation: 161

Can't remove border spacing in table

I want the picture and the grey area in the attached example to stick together and be the same height - but I can't seem to remove the border-spacing that's destroying this.

Any ideas on what I'm doing wrong? Sorry about the messy style sheet.

https://jsfiddle.net/q43L8pqy/1/

PS: I know this could be solved by div's, but this is for a very peculiar environment.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">

<style>
    body {
    background-color: #efefef;
    border: 0px;
    margin: 0px;
    }


    h1, h2, h3 {
        color: #333333;
        margin: 0px;
        font-family: Verdana, Helvetica;
    }

    }
    h1 {font-size: 21px;}
   h2   {font-size:18px;font-weight:bold;}
   h3 a {color: #0269cd; text-decoration: none; text-decoration: none;font-weight:bold;}

   table.module{border-spacing:0!important;background-color: #ffffff;border-collapse: collapse;}

    h3 {font-size: 16px;font-weight:normal;}

    html,body{min-width:600px;} 

</style>
</head>
<body style="background-color: #efefef;">
<div style="padding-top:150px;padding-bottom:150px;background-color:white;">
<table width="600" height="242" align="center" border="0" cellspacing="0" cellpadding="0" class="module" >
<tr>
<td width="263" height="242" style="padding-left:30px;"><a href="http://www.cnn.com"> <img src="http://placekitten.com/263/242" width="263" height="242" alt="Module2_img"></a></td>

<td width="277" height="242" align="left" style="padding-left:18px;background-color:#efefef;">
<h2>Content</h2><br>
<h3>There should be a cute cat on the left <br><br>
<a href="http://www.ikea.no/">Click this</a></h3>


</td>
</tr>
</table>
</div>

</body>
</html>

Upvotes: 0

Views: 898

Answers (1)

Daniel H
Daniel H

Reputation: 28

I was able to fix this by changing two things.

To get your image to stick to the right-side of the column, you need to increase your padding of the second cell from 18px to 30px. Alternatively, you could make each cell the same width, and then float the image to the right.

To get rid of the extra padding underneath the image, you will want to add display: block; to the affected image. <img> is an inline element, therefore it will leave extra padding underneath itself to make room for other elements like text.

If you cannot use display: block; for whichever reason, vertical-align: bottom; will work as well. This will allow you to keep the image inline, and will set the vertical alignment of the image so it matches the bottom of the table cell.

Upvotes: 1

Related Questions