使用CSS向表行添加边框或边距

Question

我需要仅使用CSS调整表格（除非在需要时添加类名，否则无法更改HTML。）

我想在一个tr的顶部添加一个白色边框，我已为其分配了类.rowOne。或者，添加边距也可以起作用，因为我的页面背景是白色的，因此只是两者之间的边距会产生与白色border-top

相同的结果

出于某种原因，我应用于rowOne类的任何CSS都不起作用。

JS Fiddle to show problem

.rowOne

的CSS

table .rowOne{
    border-top:8px solid #fff;
}

这有什么原因不起作用？如何设置此行的样式以获得间隙/边框/边距？

Answer 1

table .rowOne td {
    border-top:8px solid #fff;
}

这似乎有用，不知道为什么它不直接在tr上工作。您还使用了一堆不推荐使用的属性，您应该在这里查询一些信息：https://developer.mozilla.org/en-US/docs/HTML/Element/table

Answer 2

边界有效，只是你看不到它，因为它在第一个tr下。

您需要做的是将float属性设置为tr。

等等。

table.deliveryTbl tr {

    float: left;   

}

Answer 3

如果你在表格中添加边框折叠似乎有帮助，但可能会出现我没想过的副作用。

table.deliveryTbl
{
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-width: 0;
    border-left-width: 0;
    border-color:transparent;
    width:100%;
    border-collapse: collapse;
}