HTML表格边框

我遇到了表格问题，即使未设置边框并将其设置为0，它也会在表格中显示线条。Gyazo.com链接和代码如下所示。HTML表格边框

http://gyazo.com/661ce70e62c77e882f85b02c4d330316（网页截图）

<style type="text/css"><!-- 
table.affs td { background-color: white; margin: 12px 12px 12px 12px; padding: 25px 25px 25px 25px; } table.affs { border-collapse: separate; border-spacing: 10px; *border-collapse: expression('separate', cellSpacing = '15px'); } 
--></style> 
<table class="affs" style="background-color: #ffffff;" width="700px" border="0" cellspacing="2"> 
<tbody> 
<tr> 
<td><a href="http://www.kia.com" target="_blank"><img alt="" src="http://www.squareone.co/images/affiliates/kia.PNG" /></a></td> 
<td><a href="http://www.google.com" target="_blank"><img alt="" src="http://www.squareone.co/images/affiliates/google.png" /></a></td> 
<td><a href="http://www.youtube.com" target="_blank"><img alt="" src="http://www.squareone.co/images/affiliates/youtube.png" /></a></td> 
<td><a href="http://www.nike.com" target="_blank"><img alt="" src="http://www.squareone.co/images/affiliates/nike.png" /></a></td> 
</tr> 

<tr> 
<td><a href="http://www.jaguarpc.com" target="_blank"><img alt="" src="http://www.squareone.co/images/affiliates/jagpc.png" /></a></td> 
<td><a href="http://www.duxter.com" target="_blank"><img alt="" src="http://www.squareone.co/images/affiliates/duxter.png" /></a></td> 
<td><a href="http://www.sixpackshortcuts.com" target="_blank"><img alt="" src="http://www.squareone.co/images/affiliates/sps.png" /></a></td> 
<td><img src="http://www.squareone.co/images/affiliates/baeza-grey.png" href="" /></td> 
</tr> 

<tr> 
<td><img src="http://www.squareone.co/images/affiliates/dani.png" href="" /></td> 
<td><img src="http://www.squareone.co/images/affiliates/roton-grey.png" href="" /></td> 
<td><img src="http://www.squareone.co/images/affiliates/talib-grey.png" href="" /></td> 
</tr> 
</tbody> 
</table>

目前我使用的是最新版本的Chrome在Windows 7和8，我也试图在IE 9和十对Windows 7和8，分别。我也在SafariChrome中的Mac OS X Lion上测试过它。不知道为什么它这样做。

来源

2013-05-03 user2348450

你能提供css代码吗？ – sylwia 2013-05-03 21:43:47

我看到一些图像的边框，但IE 10和Chrome 26的表格看起来很好：http://jsfiddle.net/SvbKt/。不相关，但'href'不是HTML 4或HTML 5中的有效'img'属性。 – 2013-05-03 21:49:48

刚注意到了，谢谢。 – user2348450 2013-05-03 22:03:42

您的示例不使用<table>作为表格数据，而是用于布局。这通常会导致布局问题，因为表格格式的确切规则与实现有关。你的例子是CSS float的一个很好的例子，因为如果你添加了另一张图片，它仍然可以工作。它的工作原理是这样的：

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
    #container {overflow: hidden; width: 300px; padding: 0;} 
    .element {height: 100px; width: 100px; float: left; padding: 0; margin: 0;} 
    </style> 
</head> 
<body> 
    <div id="container"> 
     <div class="element" style="background-color: #f00;">1</div> 
     <div class="element" style="background-color: #ff0;">2</div> 
     <div class="element" style="background-color: #f0f;">3</div> 
     <div class="element" style="background-color: #0f0;">4</div> 
     <div class="element" style="background-color: #0ff;">5</div> 
     <div class="element" style="background-color: #00f;">6</div> 
    </div> 
</body> 
</html>

如果你觉得勇敢，你也可以尝试CSS3表，但是这还不是浮法广泛实施的。它在语义上更加正确，但仍然有许多表被误用于别的东西的缺点。

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
    #container { display: table; } 
    .line { display: table-row; } 
    .element { display: table-cell; height: 100px; width: 100px;} 
    </style> 
</head> 
<body> 
    <div id="container"> 
     <div class="line"> 
      <div class="element" style="background-color: #f00;">1</div> 
      <div class="element" style="background-color: #ff0;">2</div> 
      <div class="element" style="background-color: #f0f;">3</div> 
     </div> 
     <div class="line"> 
      <div class="element" style="background-color: #0f0;">4</div> 
      <div class="element" style="background-color: #0ff;">5</div> 
      <div class="element" style="background-color: #00f;">6</div> 
     </div> 
    </div> 
</body> 
</html>

如果这样做没有帮助，请检查您的Chrome开发者工具不需要的边框和背景，通过一定的余量闪耀。

来源

2013-05-04 21:39:06 escitalopram

回答

相关问题