Search code examples
htmlcsshtml-tablehrefwhitespace

Extra space in table after adding link

A while ago I had a problem where an image in a table was not filling the cell, which was covered in this post

However, I now have an edit for this, I need to add links to the image and text. And again, I get the same problem, I've got excess whitespace.

<table>
    <tr>
        <td width="200px" height="175px"  style="text-align: center; border: 0; background-color: #ffffff; padding: 0; margin: 0; border-collapse: collapse; "> 
            <a href="http://www.placekitten.com/"><img src="http://www.placekitten.com/200/175" style="display: block; padding: 0; border: 0;" /></a>
        </td>
    </tr>
    <tr>
        <td width="200px" height="25px"  style="text-align: center; border: 0; background-color: #535152; color: #fffdfe; padding: 0; margin: 0; border-collapse: collapse; ">
            <a href="http://www.placekitten.com/">Text</a>
        </td>
    </tr>
</table>

Here is a JSFiddle

Is it a case of padding somewhere? Or what?

Solution

  • Add the below CSS:

    Demo Fiddle

    table{
    border-collapse:collapse;
}

    You should also move your styles out of being inline, into a stylesheet.

    More on border-collapse from MDN

    The border-collapse CSS property selects a table's border model. This has a big influence on the look and style of the table cells.

    The separated model is the traditional HTML table border model. Adjacent cells each have their own distinct borders. The distance between them given by the border-spacing property.

    In the collapsed border model, adjacent table cells share borders. In that model, the border-style value of inset behaves like groove, and outset behaves like ridge.