HTML表格css边框问题答案

【问题标题】：HTML table css border issuesHTML表格css边框问题
【发布时间】：2012-02-02 17:03:13
【问题描述】：

这是我的 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 上工作。这是我得到的。 http://pastehtml.com/view/bjmptfulh.html

我已经尝试了我能想到的所有方法，但没有任何效果？我试过display:table 和display:block，但它有点把桌子弄乱了。这里有什么帮助吗？

【问题讨论】：

你用的是什么浏览器？您的示例在 Safari 中对我来说很好。
我正在使用 chrome，如果您查看 css 中的 tr 属性，我认为您不知道我期望它做什么。上面写着border-top:1px solid #ddd;padding:0 10px;，它的顶部显然没有灰色边框，也没有 10 像素的顶部和底部填充。

标签： html css

【解决方案1】：

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

对于 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 网络浏览器的浏览器。

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

这是一篇关于边框半径和其中一些新 CSS3 标签的好文章。这篇文章是 2009 年的，所以有些东西已经改变了：

CSS Tricks border radius example

【讨论】：

【解决方案2】：

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

【讨论】：

哈哈是的，在我真正看这篇文章之前，我只是这样做并工作了。谢谢！