使用 CSS 为表格行添加边框或边距答案

【问题标题】：Add borders or margins to table rows using CSS使用 CSS 为表格行添加边框或边距
【发布时间】：2013-02-26 16:51:50
【问题描述】：

我需要只使用 CSS 来调整表格（除了在需要的地方添加类名之外，不能更改 HTML。）

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

相同的结果

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

.rowOne 的 CSS

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

任何原因这不起作用？如何设置此行的样式以使其具有间隙/边框/边距？

【问题讨论】：

标签： css border margin css-tables

【解决方案1】：

如果您在表格中添加边框折叠，它似乎会有所帮助，但可能会有我没有想到的副作用。

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;
}

【讨论】：

【解决方案2】：

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

你需要做的是给 tr 设置一个 float 属性。

类似的东西。

table.deliveryTbl tr {

    float: left;   

}

【讨论】：

【解决方案3】：

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

这似乎有效，不知道为什么它不能直接在 tr 上工作。此外，您正在使用一堆已弃用的属性，您应该在这里咨询一些信息：https://developer.mozilla.org/en-US/docs/HTML/Element/table

【讨论】：