Белые линии над строками таблицы в HTML

Я не могу избавиться от белых линий, которые появляются над каждой строкой/таблицей в следующем HTML. Это всего лишь две простые таблицы, каждая из которых содержит ряд значков, связывающих сайты социальных сетей. Я пробовал применить style="border:none" к table, tr и td компонентам безрезультатно, и попробовал border:none.Белые линии над строками таблицы в HTML

Пожалуйста, посмотрите на jsfiddle - http://jsfiddle.net/3545rrnz/

<table> 
 
    <tr> 
 
     <td><a href=""><img src="facebook.png" width="35px" height="35px"></a></td> 
 
     <td width="15px"></td> 
 
     <td><a href=""><img src="instagram.png" width="35px" height="35px"></a></td> 
 
     <td width="15px"></td> 
 
     <td><a href=""><img src="pinterest.png" width="35px" height="35px"></a></td> 
 
     <td width="15px"></td> 
 
     <td><a href=""><img src="twitter.png" width="35px" height="35px"></a></td> 
 
    </tr> 
 
</table> 
 
<table> 
 
    <tr> 
 
     <td width="17px"></td> 
 
     <td><a href=""><img src="yelp.png" width="35px" height="35px"></a></td> 
 
     <td width="12px"></td> 
 
     <td><a href=""><img src="tripadvisor.png" width="35px" height="35px"></a></td> 
 
     <td width="12px"></td> 
 
     <td><a href=""><img src="youtube.png" width="35px" height="35px"></a></td> 
 
    </tr> 
 
</table>

источник

2015-06-07 Adam West

Пожалуйста, разместите рабочий [Jsfiddle] (http://jsfiddle.net) –

попробуйте размер коробки: border-box; и интервал между границами: 0; –

При указании ширины как атрибута не указывайте 'px' как единицу. – GolezTrol

Я рекомендую не использовать для этого столы.

Гораздо лучше на основе ДИВ решение:

<html> 
<head> 
<style> 
.social-icon { 
    float: left; 
    padding: 4px; 
} 
</style> 
</head> 
<body> 
<div class="social-icons"> 
    <div class="social-icon facebook"><a href=""><img src="http://www.teamcanada72.com/img%20o/icons/35x35/facebook.png" width="35px" height="35px"></a></div> 
    <div class="social-icon facebook"><a href=""><img src="http://www.teamcanada72.com/img%20o/icons/35x35/facebook.png" width="35px" height="35px"></a></div> 
    <div class="social-icon facebook"><a href=""><img src="http://www.teamcanada72.com/img%20o/icons/35x35/facebook.png" width="35px" height="35px"></a></div> 
    <div class="social-icon facebook"><a href=""><img src="http://www.teamcanada72.com/img%20o/icons/35x35/facebook.png" width="35px" height="35px"></a></div> 
</div> 
</html>

Пожалуйста, посетите - http://jsfiddle.net/3545rrnz/5/ для демонстрации. Вы можете добавить свои собственные значки и управлять пространством вокруг него через PADDING или MARGINE.

источник

2015-06-07 17:03:02

@ Pralhad Я использовал divs, как вы рекомендовали, и создал второй 'div' для второй строки, добавив свойство' clear: left' в стиль.Затем я отрегулировал прокладку и ширину второго ряда для эстетических целей. Благодарю вас! :) –

<style> 
body{ 
margin:0px; 
padding:0px; 
} 
table{ 
    border-collapse: collapse; 
} 
table tr td{ 
padding:0px; 
margin:0px; 
border:0px; 
} 
</style> 
<table> 
    <tr> 
     <td><a href=""><img src="facebook.png" width="35px" height="35px"></a></td> 
     <td width="15px"></td> 
     <td><a href=""><img src="instagram.png" width="35px" height="35px"></a></td> 
     <td width="15px"></td> 
     <td><a href=""><img src="pinterest.png" width="35px" height="35px"></a></td> 
     <td width="15px"></td> 
     <td><a href=""><img src="twitter.png" width="35px" height="35px"></a></td> 
    </tr> 
</table> 
<table> 
    <tr> 
     <td width="17px"></td> 
     <td><a href=""><img src="yelp.png" width="35px" height="35px"></a></td> 
     <td width="12px"></td> 
     <td><a href=""><img src="tripadvisor.png" width="35px" height="35px"></a></td> 
     <td width="12px"></td> 
     <td><a href=""><img src="youtube.png" width="35px" height="35px"></a></td> 
    </tr> 
</table>

Это позволит решить вашу проблему.

источник

2015-06-07 16:53:02 UnKnown

Это происходит из-за белого пространства в вашем html и из-за свойства border-collapse.

без использования таблицы:

body { 
 
    background: black; 
 
    margin:0; 
 
} 
 
#iconWrap { 
 
    text-align: center; 
 
    width: 200px; 
 
    font-size: 0; 
 
} 
 

 
#iconWrap img{ 
 
    margin: 0 5px; 
 
    }

<div id="iconWrap"> 
 
    <a href=""> 
 
    <img src="https://www.gravatar.com/avatar/8a6c643609e2ddf36223bdf5d61f0866?s=48&d=identicon&r=PG&f=1" width="35px" height="35px"> 
 
    </a> 
 
    <a href=""> 
 
    <img src="https://www.gravatar.com/avatar/8a6c643609e2ddf36223bdf5d61f0866?s=48&d=identicon&r=PG&f=1" width="35px" height="35px"> 
 
    </a> 
 
    <a href=""> 
 
    <img src="https://www.gravatar.com/avatar/8a6c643609e2ddf36223bdf5d61f0866?s=48&d=identicon&r=PG&f=1" width="35px" height="35px"> 
 
    </a> 
 
    <a href=""> 
 
    <img src="https://www.gravatar.com/avatar/8a6c643609e2ddf36223bdf5d61f0866?s=48&d=identicon&r=PG&f=1" width="35px" height="35px"> 
 
    </a> 
 
    <a href=""> 
 
    <img src="https://www.gravatar.com/avatar/8a6c643609e2ddf36223bdf5d61f0866?s=48&d=identicon&r=PG&f=1" width="35px" height="35px"> 
 
    </a> 
 

 
    <a href=""> 
 
    <img src="https://www.gravatar.com/avatar/8a6c643609e2ddf36223bdf5d61f0866?s=48&d=identicon&r=PG&f=1" width="35px" height="35px"> 
 
    </a> 
 

 
    <a href=""> 
 
    <img src="https://www.gravatar.com/avatar/8a6c643609e2ddf36223bdf5d61f0866?s=48&d=identicon&r=PG&f=1" width="35px" height="35px"> 
 
    </a> 
 
</div>

Если вы действительно хотите использовать таблицу по какой-то причине:

table{ 
 
    font-size:0; 
 
    border-collapse: collapse; 
 
    }

<table> 
 
    <tr> 
 
    <td> 
 
     <a href=""> 
 
     <img src="facebook.png" width="35px" height="35px"> 
 
     </a> 
 
    </td> 
 
    <td width="15px"></td> 
 
    <td> 
 
     <a href=""> 
 
     <img src="instagram.png" width="35px" height="35px"> 
 
     </a> 
 
    </td> 
 
    <td width="15px"></td> 
 
    <td> 
 
     <a href=""> 
 
     <img src="pinterest.png" width="35px" height="35px"> 
 
     </a> 
 
    </td> 
 
    <td width="15px"></td> 
 
    <td> 
 
     <a href=""> 
 
     <img src="twitter.png" width="35px" height="35px"> 
 
     </a> 
 
    </td> 
 
    </tr> 
 
</table> 
 
<table> 
 
    <tr> 
 
    <td width="17px"></td> 
 
    <td> 
 
     <a href=""> 
 
     <img src="yelp.png" width="35px" height="35px"> 
 
     </a> 
 
    </td> 
 
    <td width="12px"></td> 
 
    <td> 
 
     <a href=""> 
 
     <img src="tripadvisor.png" width="35px" height="35px"> 
 
     </a> 
 
    </td> 
 
    <td width="12px"></td> 
 
    <td> 
 
     <a href=""> 
 
     <img src="youtube.png" width="35px" height="35px"> 
 
     </a> 
 
    </td> 
 
    </tr> 
 
</table>

См Da vid Уолша статью Remove Whitespace Between Inline-Block Elements для получения дополнительной информации.

источник

2015-06-07 17:10:26 apaul

Белые линии над строками таблицы в HTML

ответ

Смежные вопросы