Question

我遇到了一个表的问题，即使没有设置边框并且设置为0，它也会在表格中显示行.Gyazo.com链接和代码如下。

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>

我目前正在Windows 7和8上使用最新版本的Chrome，我也分别在Windows 7和Windows上试用过IE 9和Ten。我也在Safari和Mac中的Mac OS X Lion上测试过它。铬。不确定为什么要这样做。

Answer 1

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

<!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表，但这还没有像float那样广泛实现。它在语义上更正确，但仍有许多表格被其他东西滥用的缺点。

<!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开发人员工具，查看不需要的边框或背景。[/ p>

HTML表格边框

1 个答案: