HTML表格边框_Html - Fatal编程技术网

HTML表格边框

html

HTML表格边框,html,Html,我对一个表有一个问题，它在表中显示行，即使没有设置边框，也设置为0。Gyazo.com链接和代码如下（页面截图）我目前在Windows7和Windows8上使用最新版本的Chrome，我也分别在Windows7和Windows8上的IE9和Ten上试用过。我还在Safari&Chrome中的MacOSX Lion上测试了它。不知道它为什么这么做您的示例没有将用于表格数据，而是用于布局。这通常会导致布局问题，因为表格式的确切规则取决于实现。您的示例是CSS浮动的一个很好的示例，因为如果您

我对一个表有一个问题，它在表中显示行，即使没有设置边框，也设置为0。Gyazo.com链接和代码如下

（页面截图）

我目前在Windows7和Windows8上使用最新版本的Chrome，我也分别在Windows7和Windows8上的IE9和Ten上试用过。我还在Safari&Chrome中的MacOSX Lion上测试了它。不知道它为什么这么做

您的示例没有将

用于表格数据，而是用于布局。这通常会导致布局问题，因为表格式的确切规则取决于实现。您的示例是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>


#容器{溢出：隐藏；宽度：300px；填充：0；}
.element{height:100px；width:100px；float:left；padding:0；margin:0；}
1.
2.
3.
4.
5.
6.

如果您觉得有勇气，也可以尝试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>


#容器{显示：表；}
.line{显示：表行；}
.element{显示：表格单元格；高度：100px；宽度：100px；}
1.
2.
3.
4.
5.
6.

如果这也没有帮助，请检查您的chrome developer工具是否有不需要的边框或背景通过某些边距闪烁。

您能提供css代码吗？我看到一些图像周围有边框，但在IE 10和chrome 26中，该表看起来很好：。不相关，但在HTML 4或5中，

href

不是有效的

img

属性。只是注意到了，谢谢。仍然不明白，有人删除了他们的帖子，这是不对的，我想我会发表评论，让大家知道。还是不知道它为什么这么做。忘了添加这个，但它在WordPress中。从语义上讲，它不是一个表。改用css浮动。这会让你不那么头痛。顺便说一句：我也不能重现这个问题（Firefox 20.0.1），也许你应该指定你使用什么浏览器来显示这个问题？

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