Избавиться от клеточного пространства таблицы?

Question

Избавиться от клеточного пространства таблицы?

0

Я скопировал коды из этой скрипки, где она работает очень хорошо, но на моем сайте она показывает огромные промежутки между ячейками.

Я проверил, там ничего не меняется.

        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, но это было бесполезно.

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

Claudio 03 янв. 2014, в 11:50

Источник

2

похоже, вам нужно очистить кеш вашего браузера. Я вижу это без разрыва и без изображений.
bansi 03 янв. 2014, в 10:11
0

согласился с @bansi, я не вижу разрыва !!
NoobEditor 03 янв. 2014, в 10:12
0

Ой ну спасибо. Теперь этот разрыв исчезает. Что вы имеете в виду нет изображений?
Claudio 03 янв. 2014, в 10:15
0

примечание: ваша CSS не совместима со старыми браузерами. Сначала я проверил с оперой 12
bansi 03 янв. 2014, в 10:16
0

Я знаю, что ниже IE9 это беспорядок.
Claudio 03 янв. 2014, в 10:18
0

@bansi Не могли бы вы помочь мне с этой проблемой? artotek.fi/mobiili_index.html ссылка на элемент td распространяется так, что его можно нажимать даже за пределами ссылки.
Claudio 03 янв. 2014, в 10:47

Показать ещё 4 комментария

Теги:

html

css

1 ответ

Ещё вопросы

похоже, вам нужно очистить кеш вашего браузера. Я вижу это без разрыва и без изображений.
согласился с @bansi, я не вижу разрыва !!
Ой ну спасибо. Теперь этот разрыв исчезает. Что вы имеете в виду нет изображений?
примечание: ваша CSS не совместима со старыми браузерами. Сначала я проверил с оперой 12
Я знаю, что ниже IE9 это беспорядок.
@bansi Не могли бы вы помочь мне с этой проблемой? artotek.fi/mobiili_index.html ссылка на элемент td распространяется так, что его можно нажимать даже за пределами ссылки.

bansi · Accepted Answer · 2014-01-03T09-05-00.000Z

Ответьте на вопрос в комментарии:

Чтобы исправить элемент <a> вы можете установить стиль:

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

Примечание: добавлена фиксированная ширина для элемента и заданы поля auto.

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

Для этого вам нужно сделать следующее.

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

<td><a href="info.html"><span class="fa fa-info-circle">Tietoa Meistä</span></a></td>
измените display: inline; для display: block; для table td a { по строке 236
изменить display: inline-block; для display: block; по строке 535 для класса .fa:before.

Изменить 2: Проверить скрипту здесь

Благодарю. Еще одна проблема; Как я могу развернуть ссылку на иконку? Пробовал устанавливать высоту, но расширил ссылку вниз.
Вы хотите сказать, что изображение также должно быть частью ссылки (кликабельно)?
Именно так. Как я могу это сделать?
вам также может понадобиться добавить table td a:hover{text-decoration: none;} противном случае при наведении курсора мыши вы увидите некрасивую линию
Спасибо, что обратили внимание, что теперь по поводу ссылки на иконку?
я отредактировал свой ответ о том, что делать для ссылки на значок.
Я добавил скрипку в ответ. проверить, если это то, что вы хотите?
Еще одна вещь, как я могу отделить значок от текста на несколько пикселей. Пробовал на полях, но это не сработало.
Вы можете использовать отступы для класса .fa:before . как padding-bottom:20px; , извините, не могу обновить скрипку, работая с моего мобильного сейчас. могу проверить утро моего времени.