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上测试过它。不知道为什么它这样做。
答
您的示例不使用<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开发者工具不需要的边框和背景，通过一定的余量闪耀。
你能提供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