问HTML表格边框
EN

Stack Overflow用户

提问于 2013-05-04 05:37:50

回答 1查看 158关注 0票数 0

我遇到了一个表格的问题，它在表格中显示线条，即使没有设置边框，它也被设置为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和Windows 8上使用的是最新版本的Chrome，我也分别在Windows 7和Windows 8上的IE 9和Ten上试用过。我还在Safari和Chrome的Mac OS X Lion上测试过它。不知道它为什么要这么做。

html

回答 1

Stack Overflow用户

发布于 2013-05-05 05:39:07

您的示例没有将<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表，但这还没有像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开发人员工具中不需要的边框或通过一些边距闪耀的背景。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/16367909

复制

相似问题

问HTML表格边框
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML表格边框EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML表格边框
EN