Question

我似乎无法摆脱以下HTML中每行/表上方出现的白线。它只是两个简单的表，每个表都有一行链接到社交网站的图标。我尝试将style="border:none"应用于table，tr和td组件无效，并尝试了border:none。

请查看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>

Answer 1

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

它将解决您的问题。

Answer 2

我建议不要使用表格。

更好的基于DIV的解决方案：

<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添加自己的图标并管理它周围的空间。

Answer 3

这是因为html中的空格和边界崩溃属性。

不使用表格：

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>

有关详情，请参阅David Walsh的文章Remove Whitespace Between Inline-Block Elements。

表格上方的白线以HTML格式排列

3 个答案: