添加链接后表格中的额外空间

Question

前段时间我遇到了一个问题，表格中的图像没有填满单元格，this post 中介绍了这个问题

但是，我现在对此进行了编辑，我需要添加指向图像和文本的链接。再一次，我遇到了同样的问题，我有多余的空格。

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

这是JSFiddle

这是在某处填充的情况吗？还是什么？

Answer 1

您应该将border-collapse:collapse 移动或添加到您的表中，而不是您的 td。

border-collapse 是 table 属性而不是 td 的。

以及更多信息：border-collapse

Answer 2

添加以下 CSS：

Demo Fiddle

table{
    border-collapse:collapse;
}

您还应该将样式从内联中移到样式表中。

More on border-collapse from MDN

border-collapse CSS 属性选择表格的边框模型。这 对表格单元格的外观和样式有很大影响。

分隔模型是传统的 HTML 表格边框模型。 相邻的单元格都有自己独特的边界。距离 它们之间由border-spacing 属性给出。

在折叠边框模型中，相邻的表格单元格共享边框。在 在该模型中，插图的边框样式值的行为类似于凹槽，并且 一开始就表现得像山脊。