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

添加以下CSS：

Demo Fiddle

table{
    border-collapse:collapse;
}

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

More on border-collapse from MDN

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

分离的模型是传统的HTML表格边框模型。   相邻的细胞各自具有其独特的边界。距离   它们之间由边界间距属性给出。

在折叠边框模型中，相邻的表格单元格共享边框。在   那个模型，插图的边框式值就像凹槽一样   开头表现得像山脊。

Answer 2

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

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

以及更多信息：border-collapse

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

2 个答案:

Demo Fiddle