CSS备用行-某些行隐藏

CSS Alternate Rows - some rows hidden

本文关键字：隐藏 备用 CSS      更新时间：2023-09-26

我试图设计一个表格的样式，使每一行都是不同的颜色（奇数/偶数）。我有以下CSS：

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

但是，我的一些行可以被隐藏，我仍然希望这些行交替出现。即使相邻的行不一定是奇数和偶数，我如何调整上面的内容，使其看起来像交替的行？

如果使用jQuery，可以使用它的一个函数，例如.filter()，只选择可见的元素。但这里的关键是CSS选择器:visible。

例如（参见jsfiddle）：

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

由于只有当奇数行被隐藏时才会出现"丢失条纹现象"，因此您可以在奇数行被隐藏的地方添加一个不可见的填充行。

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

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

但是，如果您的表很大，并且隐藏了大块的连续行，那么这将比Javascript/jQuery解决方案执行得更好。

我使用由两种交替颜色组成的表的背景图像解决了这个问题。这就形成了一个非完全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>

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

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

这是一把小提琴在演奏。

这使得每隔一行可见为灰色。有关这些公式如何工作的更多信息，这是一个很好的教程。

这是一个难题，我刚刚花了一段时间玩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所说的对行进行分页。

这个问题可能很老了，但在寻找这个问题的解决方案时，我来到这里，受到Jeff Seifert答案的启发，我使用了一个重复的线性梯度背景图像来获得一个纯粹基于css的解决方案：

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

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

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

  1. 通过应用tr{white-space: nowrap;}防止文本换行-仍然需要注意非文本元素，溢出也可能成为的一个问题

  2. 用另一个元素（如<div>）包装<tr>内容并应用div{max-height:2em;}-这需要更改HTML，还需要处理溢出

相关文章：