摆脱表格cellspacing？

Question

请参阅 here 。

我复制了 fiddle 中的代码，它的工作正常， 但在我的网站上，它显示了细胞之间的巨大差距。

我已经检查过，没有什么可以覆盖。

        table td {
  border-collapse: collapse;
  border-spacing: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


    td.fa-info-circle a
{
    display: block;
}

td.fa-phone a
{
    display: block;
}

我甚至试过了CSS reset，但这没用。

<table cellspacing="0px" style="border-spacing:0px">
    <tr>
        <td class="fa fa-info-circle"><a href="info.html">Tietoa Meistä</a></td>
        <td class="fa fa-phone"><a href="contact.html">Ota yhteyttä</a></td>
        <td class="fa fa-phone"><a href="contact.html">Ota yhteyttä</a></td>
    </tr>
</table>

fa-info-circle调用该类中的内容 .fa-info-circle:before{content:"\f05a";}这是图标。使用FontAwesome。

Answer 1

回答评论中的问题：

要修复<a>元素，您可以将样式设置为：

table td a {
    color: inherit;
    text-decoration: none;
    display: inline;
    padding: 0px;
    width: 150px;
    margin-left: auto;
    margin-right: auto;
}

注意：为元素添加固定宽度，并将边距设置为自动。

修改：根据评论进行更改（将图片放入链接中）

您需要执行以下操作。

1. 在第1261行声明了table td a {的样式块。删除该块。它实际上覆盖了第233行声明的样式

2. 将fa课程移至td代码的范围。

   <td><a href="info.html"><span class="fa fa-info-circle">Tietoa Meistä</span></a></td>

3. 在第236行将display: inline;更改为display: block; {/ 1}}

4. 将table td a {更改为第{53}行display: inline-block;的{​​{1}}。

修改2：检查Fiddle Here