javascript 表格边框顶部仅在没有 css3 的第一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13249949/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Table Border-top only on the first row without css3
提问by sindrem
How can i use css or jquery to add border-top only on the first row in a table?
如何使用 css 或 jquery 仅在表的第一行添加边框顶部？
I'm using the code below to get border on every td, but i need a border for the first row on top as well.
我正在使用下面的代码在每个 td 上获取边框，但我也需要顶部第一行的边框。
I cannot use CSS3 in this project btw.
顺便说一句，我不能在这个项目中使用 CSS3。
What i have:
我有的：
content
内容
content
内容
content
内容
What i want:
我想要的是：
content
内容
content
内容
content
内容
.MyCarTable td {
border-bottom: 1px solid grey;
}
回答by Robert Koritnik
Everything can be done with CSS only which is in this case preferred way becuase of performance reasons. Don't use javascript unless you actually have to because it can't be done in any other way.
一切都只能用 CSS 来完成，在这种情况下，出于性能原因，这是首选方式。不要使用 javascript，除非你真的必须这样做，因为它不能以任何其他方式完成。
Solution 1: use first-childpseudo class
方案一：使用first-child伪类
Add additional style definition.
添加额外的样式定义。
.MyCarTable td {
border-bottom: 1px solid #ccc;
}
.MyCarTable tr:first-child td {
border-top: 1px solid grey;
}
And don't worry. This particular pseudo class has been long supported in browsers. Even IE supports it since version 7. Here's a JSFiddlethat shows this working.
别担心。浏览器长期以来一直支持这个特殊的伪类。甚至 IE 从版本 7 开始都支持它。这是一个JSFiddle，显示了这个工作。
Solution 2: table header using thelements
解决方案 2：使用th元素的表头
If your table has header row, then use thelements instead of tdin it and set different styling for header cells. But use this only when semantic content of your first row cells is actually cell header description for rows underneath. Otherwise I wouldn't suggest it.
如果您的表格有标题行，则使用th元素而不是其中的元素td并为标题单元格设置不同的样式。但仅当您的第一行单元格的语义内容实际上是下面行的单元格标题描述时才使用它。否则我不会推荐它。
Consecutive tables problem
连续表问题
If you have consecutive tables within the same container then next tables get top borders from previous table's last row. And you don't want them to apply top border on first row because that duplicates borders.
如果您在同一个容器中有连续的表格，那么下一个表格会从上一个表格的最后一行获得顶部边框。并且您不希望它们在第一行应用顶部边框，因为这会重复边框。
The solution (as seen in this JSFiddle) is similar and also applies to first table only:
解决方案（如本 JSFiddle 中所示）类似，也仅适用于第一个表：
.MyCarTable td {
border-bottom: 1px solid #ccc;
}
.MyCarTable:first-child tr:first-child td {
border-top: 1px solid #f99;
}?
As you can see top row's borders are only set for first table and first row within it. All consecutive tables won't set it. This example is of course only compatible with first solution above. If you'd taken the path with thelements then a combination of both should be used (thand pseudo classes).
如您所见，仅针对第一个表格和其中的第一行设置了顶行的边框。所有连续的表都不会设置它。这个例子当然只与上面的第一个解决方案兼容。如果您选择了包含th元素的路径，则应使用两者的组合（th和伪类）。
But as you've said you've consolidated your repeater code.
但是正如您所说，您已经整合了中继器代码。
回答by andlrc
$(".MyCarTable tr:first").css({
borderTop: "1px solid grey"
});
回答by Gopikrishna
Try this:
试试这个：
.MyCarTable tr{border-top: 1px solid grey;}
.MyCarTable tr + tr {border-top: none !important;}
Or
或者
.MyCarTable tr td {border-top: 1px solid grey;}
.MyCarTable tr + tr td {border-top: none !important;}
"+" is an adjacent selector in CSS. Adjacent selector is supported in IE7+ and all other modern browsers.
"+" 是 CSS 中的相邻选择器。IE7+ 和所有其他现代浏览器都支持相邻选择器。
