Question

这是我的HTML代码。

<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上没有任何填充或边框或border-radius实际上没有任何效果。这是我得到的。 http://pastehtml.com/view/bjmptfulh.html

我已经尝试过我能想到的一切，但没有任何作用？我尝试了display:table和display:block，但它只是有点混乱。这里有什么帮助吗？

Answer 1

我认为您需要将css应用于td元素，如本文所述：Space between two rows in a table?。否则你的代码看起来很好。

Answer 2

如果您在Chrome中查看代码，它实际上适用于桌面上的圆角以及所有yoru其他样式。如果您不使用Chrome或webkit浏览器（safari，chrome），则需要添加其他border-radius标记。

对于mozilla（Firefox），您需要添加-moz-border-radius：4px 4px 0 0; 对于Opera，您需要添加-o-border-radius：4px 4px 0 0; 我还添加-khtml-border-radius：4px 4px 0 0;对于某些旧版Opera和使用Konqueror Web浏览器的浏览器。

您还需要检查这些不同形式的样式的语法，因为并非所有形式都使用相同的标记。例如，-moz-使用-mox-border-radius-topright来改变右上角，而-webkit-使用-webkit-border-top-left-radius来调整那个角。

这是一篇关于边界半径和一些新CSS3标签的好文章。这篇文章是从2009年开始的，所以有些事情已经发生了变化：

CSS Tricks border radius example

HTML表css边框问题

2 个答案: