CSS Zebra 使用 CSS3 对带有隐藏行的表格进行条带化？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3773890/
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
Zebra striping a table with hidden rows using CSS3?
提问by Alex C
I've got a table
我有一张桌子
<table id="mytable">
<tr style="display: none;"><td> </td></tr>
<tr><td> </td></tr>
<tr style="display: none;"><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
I'm trying to set the table striping to use nth-child selectors but just can't seem to crack it.
我正在尝试将表条带设置为使用第 n 个子选择器，但似乎无法破解它。
table #mytable tr[@display=block]:nth-child(odd) {
background-color: #000;
}
table #mytable tr[@display=block]:nth-child(odd) {
background-color: #FFF;
}
I'm pretty sure I'm close ... can't quite seem to crack it.
我很确定我已经接近了......似乎无法破解它。
anyone pass along a clue?
有人传递线索吗？
采纳答案by Brian Campbell
Here's as close as you're going to get. Note that you can't make the nth-childcount only displayed rows; nth-childwill take the nth child element no matter what, not the nthchild that matches a given selector. If you want some rows to be missing and not affect the zebra-striping, you will have to remove them from the table entirely, either through the DOM or on the server side.
这是你要得到的最接近的。请注意，您不能使nth-child计数仅显示行；无论如何nth-child都将采用第n个子元素，而不是与给定选择器匹配的第n个子元素。如果您希望某些行丢失且不影响斑马条纹，则必须通过 DOM 或在服务器端将它们从表中完全删除。
<!DOCTYPE html>
<style>
#mytable tr:nth-child(odd) {
background-color: #000;
}
#mytable tr:nth-child(even) {
background-color: #FFF;
}
</style>
<table id="mytable">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
Here are the fixes that I made:
以下是我所做的修复：
table #mytable tr[@display=block]:nth-child(odd) {
background-color: #000;
}
There's no need to specify an ancestor selector for an idbased selector; there is only ever one element that will match #table, so you're just adding extra code by adding the tablein.
无需为id基于选择器指定祖先选择器；只有一个元素会匹配#table，因此您只需通过添加tablein 来添加额外的代码。
#mytable tr[@display=block]:nth-child(odd) {
background-color: #000;
}
Now, [@display=block]would match elements which had an attribute displayset to block, such as <tr display=block>. Display isn't a valid HTML attribute; what you seem to be trying to do is to have the selector match on the style of the element, but you can't do that in CSS, since the browser needs to apply the styles from the CSS before it can figure that out, which it's in the process of doing when it's applying this selector. So, you won't be able to select on whether table rows are displayed. Since nth-childcan only take the nth child no matter what, not nth with some attribute, we're going to have to give up on this part of the CSS. There is also nth-of-type, which selects the nth child of the same element type, but that's all you can do.
现在，[@display=block]将匹配属性display设置为 block 的元素，例如<tr display=block>. 显示不是有效的 HTML 属性；您似乎想要做的是让选择器匹配元素的样式，但您不能在 CSS 中这样做，因为浏览器需要先应用 CSS 中的样式，然后才能弄清楚，这当它应用这个选择器时，它正在做。因此，您将无法选择是否显示表格行。由于无论如何nth-child都只能取第n个孩子，而不是第n个具有某些属性的孩子，因此我们将不得不放弃 CSS 的这一部分。还有nth-of-type, 它选择相同元素类型的第n个子元素，但这就是你所能做的。
#mytable tr:nth-child(odd) {
background-color: #000;
}
And there you have it.
你有它。
回答by Zak Henry
If you are using JQuery to change the visibility of rows you can apply the following function to the table to add an .oddclass where appropriate. Call it each time the rows visible is different.
如果您使用 JQuery 更改行的可见性，您可以将以下函数应用于表以.odd在适当的地方添加一个类。每次可见行不同时调用它。
function updateStriping(jquerySelector){
$(jquerySelector).each(function(index, row){
$(row).removeClass('odd');
if (index%2==1){ //odd row
$(row).addClass('odd');
}
});
}
And for the css simply do
而对于 css 只需做
table#tableid tr.visible.odd{
background-color: #EFF3FE;
}
回答by JSWilson
While you can't Zebra stripe a table with hidden rows using CSS3 you can do it with JavaScript. Here is how:
虽然您无法使用 CSS3 对带有隐藏行的表格进行 Zebra 条带化，但您可以使用 JavaScript 来实现。方法如下：
var table = document.getElementById("mytable");
var k = 0;
for (var j = 0, row; row = table.rows[j]; j++) {
if (!(row.style.display === "none")) {
if (k % 2) {
row.style.backgroundColor = "rgba(242,252,244,0.4)";
} else {
row.style.backgroundColor = "rgba(0,0,0,0.0)";
}
k++;
}
}
回答by Stalzer
For a jquery way, you could use this function which iterates through the rows in your table, checking the visbility of the row and (re)setting a class for visible odd rows.
对于 jquery 方式，您可以使用此函数遍历表中的行，检查行的可见性并（重新）设置可见奇数行的类。
function updateStriping(jquerySelector) {
var count = 0;
$(jquerySelector).each(function (index, row) {
$(row).removeClass('odd');
if ($(row).is(":visible")) {
if (count % 2 == 1) { //odd row
$(row).addClass('odd');
}
count++;
}
});
}
Use css to set a background for odd rows.
使用 css 为奇数行设置背景。
#mytable tr.odd { background: rgba(0,0,0,.1); }
Then you can call this zebra-striper whenever by using:
然后，您可以随时使用以下命令调用此 zebra-striper：
updateStriping("#mytable tr");
回答by Shaggy
I came up with a sort of solution but it's reliant on the fact that the table can only ever have a maximum number of hidden rows and comes with the downside of requiring 2 additional CSS rules for each possible hidden row. The principle is that, after each hidden row, you switch the background-colorof the odd and even rows around.
我想出了一种解决方案，但它依赖于这样一个事实，即表格只能有最大数量的隐藏行，并且缺点是每个可能的隐藏行都需要 2 个额外的 CSS 规则。原理是，在每个隐藏行之后，您切换background-color奇数行和偶数行。
Here's a quick example with just 3 hidden rows and the necessary CSS for up to 4 of them. You can already see how unwieldy the CSS can become but, still, someone may find some use for it:
这是一个只有 3 个隐藏行和最多 4 个隐藏行的必要 CSS 的快速示例。您已经可以看到 CSS 变得多么笨拙，但仍然有人可能会发现它有一些用处：
table{
background:#fff;
border:1px solid #000;
border-spacing:1px;
width:100%;
}
td{
padding:20px;
}
tr:nth-child(odd)>td{
background:#999;
}
tr:nth-child(even)>td{
background:#000;
}
tr[data-hidden=true]{
display:none;
}
tr[data-hidden=true]~tr:nth-child(odd)>td{
background:#000;
}
tr[data-hidden=true]~tr:nth-child(even)>td{
background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
background:#000;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
background:#000;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
background:#000;
}<table>
<tbody>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr data-hidden="true"><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr data-hidden="true"><td></td><td></td></tr>
<tr data-hidden="true"><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</tbody>
</table>回答by commonpike
in jquery ..
在 jquery..
var odd = true;
$('table tr:visible').each(function() {
$(this).removeClass('odd even').addClass(odd?'odd':'even');
odd=!odd
});
回答by Rameshwar Chaturvedi
Jquery codes for zebra color in html table
html表中斑马颜色的jquery代码
$("#mytabletr:odd").addClass('oddRow');
$("#mytabletr:even").addClass('evenEven');
And CSS you can do
和 CSS 你可以做
.oddRow{background:#E3E5E6;color:black}
.evenRow{background:#FFFFFF;color:black}
回答by rale09
You can easily fake the zebra stripes if you apply a vertically repeating gradient on the parent table, positioned exactly to match the rows' height (the rows would have to be transparent). That way the table won't care if anything's hidden, it will repeat no matter what.
如果在父表上应用垂直重复渐变，精确定位以匹配行的高度（行必须是透明的），则可以轻松伪造斑马条纹。这样桌子就不会在意是否隐藏了任何东西，无论如何它都会重复。
回答by Anton
I add in css:
我在css中添加：
tr[style="display: table-row;"]:nth-child(even) {
background-color: #f3f6fa;
}
and on create tr add in tag
并在创建 tr 添加标签
style="display: table-row;"
