添加链接后表中的多余空间

Question

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?

Answer 1

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.

Answer 2

You should move or add border-collapse:collapse to your table instead of your td.

border-collapse is a table property not td 's.

and more info: border-collapse