文章/答案/技术大牛

发布

问CSS交替行-某些行被隐藏
EN

Stack Overflow用户

提问于 2011-06-02 21:26:09

回答 6查看 11.4K关注 0票数 21

我正在尝试设置一个表格的样式，使每一行都有不同的颜色(奇数/偶数)。我有以下CSS：

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

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

但是，我的一些行可以被隐藏，并且我仍然希望这些行交替。即使相邻的行不一定是奇数和偶数，我如何调整上面的值，使其显示交替行的外观？

javascript

jquery

css

css-tables

回答 6

Stack Overflow用户

回答已采纳

发布于 2011-06-02 21:29:11

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

例如(参见jsfiddle)：

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

票数 24

Stack Overflow用户

发布于 2013-10-10 10:02:50

由于“缺少条带现象”仅在奇数行被隐藏时才会发生，因此您可以在隐藏奇数行的地方添加单个不可见的填充行。

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

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

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

票数 3

Stack Overflow用户

发布于 2015-04-27 02:07:35

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

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/6220587

复制

相似问题

问CSS交替行-某些行被隐藏
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS交替行-某些行被隐藏EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS交替行-某些行被隐藏
EN