问答中心分类: HTML将边框底部添加到表格行
0
匿名用户 提问 6天 前

我有一个3乘3的表。我需要一种方法为每行的底部添加边框tr给它一个特定的颜色。
首先,我尝试了直接的方法,即:

But that didn't work. So I added CSS like this:

tr {
border-bottom: 1pt solid black;
}


That still didn't work.

I would prefer to use CSS because then I don't need to add a style attribute to every row.
I haven't added a border attribute to the . I hope that that is not affecting my CSS.
15 Answers
0
Nathan Manousos 回答 6天 前

添加border-collapse:collapse到您的表格规则:

table { 
    border-collapse: collapse; 
}

实例

table {
  border-collapse: collapse;
}

tr {
  border-bottom: 1pt solid black;
}
<table>
  <tr><td>A1</td><td>B1</td><td>C1</td></tr>
  <tr><td>A2</td><td>B2</td><td>C2</td></tr>
  <tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>

链接

Geeky Guy 回复 6天 前

这本身不起作用。您仍然无法设置行的样式,但可以设置单元格的样式。

Robert Siemer 回复 6天 前

“你错了,@Renan。崩溃的边界模型正是使行边界可固定的原因。”。根据CSS第17.6节:在单独的边界模型“行,[…]不能有边界(即,用户代理必须忽略这些元素的边界属性)。”“在折叠边界模型中,可以指定包围全部或部分单元格、行[和]行组[…]的边界。顺便提一句:它在我的浏览器中有效(Chrome 37)。

Porlune 回复 6天 前

我认为有些人可能会感到困惑(就像我一样),没有注意到需要在桌子上设置边框折叠样式,而不是在行上。

Liqun Sun 回复 6天 前

Chrome似乎没有这个功能,尽管它支持其他的边框折叠功能。

Michael Rogers 回复 6天 前

这移除了填充物。

0
Jpduro 回答 6天 前

使用border-collapse:collapse在桌子上和border-bottom: 1pt solid black;在tr上

Radu Simionescu 回复 6天 前

即使边界已折叠,在tr上设置边界也毫无用处。您必须将其设置在tr的tds上

Styphon 回复 6天 前

@RaduSimionescu错了,它在tr边界塌陷。

imrek 回复 6天 前

FF 45.0.1中无影响。

0
simoncereska 回答 6天 前

使用
border-collapse:collapse正如内森所写,你需要设置
td { border-bottom: 1px solid #000; }

Sayan 回复 6天 前

我也会这样做!在td上添加边框,并在表上使用边框折叠

0
dmeyer 回答 6天 前

这里有很多不完整的答案。由于无法将边框应用于tr标签,您需要将其应用于tdth这样的标签:

td {
  border-bottom: 1pt solid black;
}

这样做将在每个td,如果希望边框看起来像是tr标签可以说,为了“填补空白”,您需要利用border-collapse上的属性table元素并将其值设置为collapse,如下所示:

table {
  border-collapse: collapse;
}
0
Ian Bruce 回答 6天 前

您可以使用box-shadow属性来伪造tr要素调整的Y位置box-shadow(以下表示为2px)以调整厚度。

tr {
  -webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  -moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}