Question

我正在尝试设置一个表格，以便每一行都是不同的颜色（奇数/偶数）。我有以下CSS：

#woo tr:nth-child(even) td {
    background-color: #f0f9ff;
}

#woo tr:nth-child(odd) td {
    background-color: white;
}

但是，我的一些行可以被隐藏，我仍然希望行交替。我如何调整上面所以它给出了替代行的外观，即使彼此相邻的行不一定是奇数和偶数？

Answer 1

如果您使用的是jQuery，则可以使用其中一个函数（例如.filter()）来仅选择可见的元素。但这里的关键是CSS选择器:visible。

例如（见jsfiddle）：

jQuery('tr:visible:odd').css({'background-color': 'red'});
jQuery('tr:visible:even').css({'background-color': 'yellow'});

Answer 2

我使用由两种替代颜色组成的表的背景图像解决了这个问题。这使得不太完整的CSS解决方案因为它涉及创建图像，但它应该可以很好地扩展到具有数千个条目的表。

下面的base64编码中的背景图像是1x50图像，前25个像素为一种颜色，底部25个像素为替代颜色。

table {
  border-collapse: collapse;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAIAAAASmSbdAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wQbATAssXhCIwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAYSURBVAjXY/j8/joTAwMDTfGXDzdpbQcATuQF2Ze0VigAAAAASUVORK5CYII=);
}
  
td {
   padding: 2px 4px;
   height: 21px;
}

<table>
    <tbody>
        <tr style="display: table-row;">
            <td>ANIMAL!!</td>
        </tr>
        <tr style="display: table-row;">
            <td>Beaker</td>
        </tr>
        <tr style="display: none;">
            <td>Bunsen Honeydew, Ph.D.</td>
        </tr>
        <tr style="display: table-row;">
            <td>Camilla the Chicken</td>
        </tr>
        <tr style="display: table-row;">
            <td>Dr. Julius Strangepork</td>
        </tr>
        <tr style="display: none;">
            <td>Dr. Teeth</td>
        </tr>
        <tr style="display: none;">
            <td>Floyd Pepper</td>
        </tr>
        <tr style="display: none;">
            <td>Gonzo</td>
        </tr>
        <tr style="display: table-row;">
            <td>Janice</td>
        </tr>
        <tr style="display: none;">
            <td>Miss Piggy</td>
        </tr>
        <tr style="display: none;">
            <td>Rizzo</td>
        </tr>
        <tr style="display: none;">
            <td>Robin the Frog</td>
        </tr>
        <tr style="display: table-row;">
            <td>Sam the Eagle</td>
        </tr>
        <tr style="display: table-row;">
            <td>Statler</td>
        </tr>
        <tr style="display: none;">
            <td>The Swedish Chef</td>
        </tr>
        <tr style="display: table-row;">
            <td>Waldorf</td>
        </tr>
        <tr style="display: none;">
            <td>Zoot</td>
        </tr>
    </tbody>
</table>

Answer 3

这是一个很难的问题，我只花了一些时间玩CSS2和3个选择器，我不确定我们还在那里。这样的事情应该是可能的，但不起作用：

tr td {background-color:white;}
tr td:not([style="display:none"]):nth-of-type(even) {
    background-color:#f0f9ff;
}

<tr><td>1</td></tr>
<tr><td style="display:none">2</td></tr>
<tr><td>3</td></tr>

似乎你坚持使用jQuery的:visible扩展名（不是原生CSS），但如果它运行缓慢，肯定会将这些行分页为@Ionut说。

Answer 4

我意识到这已经太晚了，但我今天遇到了同样的问题，并提出了一个使用nth-child公式的纯CSS解决方案。我不知道它是否适合您的确切情况，但如果每隔一行都被隐藏但您仍然需要可见行作为交替颜色，这很有用。 CSS选择器如下所示：

tr:nth-child(4n - 1) { background-color: grey; }

Here is a fiddle显示它的实际效果。

这使所有其他可见行变为灰色。有关这些公式如何工作的更多信息，请this is a great tutorial。

Answer 5

由于只有隐藏奇数行数时才会出现“缺失条纹现象”，所以无论奇数在哪里都可以添加一个不可见的填充行行被隐藏。

Row 1
Row 2
Row 3 (hidden)
Padding (hidden)
Row 4
Row 5

如果这实际上是一个很好的解决方案，高度取决于您当前的代码，例如如何创建表以及如何隐藏行。

但是如果你的表很大并且隐藏了大量连续行，那么这比Javascript / jQuery解决方案要好得多。

Answer 6

这个问题可能很老了，但是当我寻求一个解决方案时，我来到这里，受到Jeff Seifert's answer的启发，我使用了重复线性渐变背景图像来获得纯粹基于CSS的解决方案：

tbody {
    background-image: repeating-linear-gradient(grey 0 2em, white 2em 4em);
}
tr {
    height: 2em;
}

唯一的缺点是，您将必须为表格行指定一个高度（并在渐变定义中输入相同的值）。

编辑：仅当所有行的高度相同时，此方法才有效。遗憾的是，最大高度不适用于表行。我有两个半熟的解决方案：

通过应用tr{white-space: nowrap;}防止文本自动换行-仍然必须注意非文本元素，溢出也可能成为问题
将<tr>的内容与<div>之类的另一个元素一起包装并应用div{max-height:2em;}-这需要更改HTML，还需要处理溢出问题

Answer 7

如果您使用jQuery，则可以采用以下方法：

的JavaScript

$("tr:odd").addClass("odd");

CSS

.odd {
   background: #ccc;
}

来源：http://css-tricks.com/snippets/jquery/jquery-zebra-stripe-a-table/

CSS Alternate Rows - 隐藏了一些行

7 个答案: