HTML表格CSS边框问题

问题描述：

<table cellspacing="0" class="assets_table"> 
<tbody> 
<tr class="table_header"><td>ID</td><td>Title</td><td>Regarding</td><td>Status</td><td>Date</td></tr> 
<tr><td>9</td><td>Testing</td><td>hijacked account</td><td></td><td> 4 Jan, 2012</td></tr></tbody> 
</table>

这里是它的CSS。

.assets_table{width:100%;border-radius:4px 4px 0 0;border:1px solid #ccc;overflow:hidden} 
.assets_table .table_header{background:grey;height:30px;font-weight:bold;padding:0;border-top:1px solid #f9f9f9;} 
.assets_table td {padding:5px 10px} 
.assets_table tr {border-top:1px solid #ddd;padding:0 10px;}

但是，没有内边距或边框或边界半径的实用上不会有任何的tr的工作。这是我得到的。 http://pastehtml.com/view/bjmptfulh.html

我已经试过所有我能想到的，但没有工作？我试过display:table和display:block，但它只是有点弄乱了桌子。这里有帮助吗？

是什么浏览器您使用？您的示例在Safari中适合我。 – 2012-01-04 19:46:56

在Chrome中正常工作... – cdeszaq 2012-01-04 19:49:47

如果您查看css中的'tr'属性，我使用chrome，我不认为您知道我期待它做什么。它说'border-top：1px solid #ddd; padding：0 10px;'它的顶部显然没有灰色边框，没有10px的顶部和底部填充。 – Frank 2012-01-04 19:50:56

答

我认为你需要的CSS应用到TD元素，在这个岗位解释说：Space between two rows in a table?。否则你的代码看起来不错。

哈哈是的，我只是这样做，并在我真正看过这篇文章之前工作。谢谢！ – Frank 2012-01-04 19:55:35

答

如果您在Chrome中查看您的代码，它实际上可以与桌面上的圆角以及所有yoru其他样式一起使用。如果您未使用Chrome或Webkit浏览器（safari，chrome），则需要添加其他边框半径标签。

对于Mozilla（火狐），您将需要添加-moz-边界半径：4PX递四方0 0; 对于Opera，您需要添加-o-border-radius：4px 4px 0 0; 我也添加-khtml-border-radius：4px 4px 0 0;对于使用Konqueror网络浏览器的一些较旧版本的Opera和浏览器。

你还需要检查这些不同形式的样式的语法不是一切使用相同的标记。例如，-moz-使用-mox-border-radius-topright更改右上角，而-webkit-使用-webkit-border-top-left-radius调整该角点。

这是一篇关于边框半径和一些新的CSS3标签的好文章。 Thsi文章是从2009年这样一些事情已经改变了：

CSS Tricks border radius example

HTML表格CSS边框问题

相关推荐