Избавиться от размещения таблиц?

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

Примечание: добавлена ​​фиксированной ширины для элемента, и установить поля для авто.

Edit: изменения как на комментарий (поместить изображение в ссылке)

Вам необходимо выполнить следующие действия для этого.

1. есть блок стиля для table td a { объявлен в строке 1261 удалить этот блок. он фактически отменяет стиль, объявленный в строке 233

2. переместить класс fa в диапазон от метки td.

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

3. изменить display: inline; к display: block; для table td a { в строке 236

4. Изменение display: inline-block; к display: block; на линии 535 для класса .fa:before.

Edit 2: Проверьте Fiddle Here