Question

我正在尝试更改表的颜色背景，但它只更改了行除以2.如何更改其余部分？

我附上了表格的代码和相关的CSS。

CSS

.table-striped{
  background: #f8fcff !important;
  .label {
    width: 44px;
    height: 16px;
    padding-top: 3px;
}

Answer 1

你需要使用第n个孩子。

这将允许您编辑要设置样式的行

EXAMPLE

table tr:nth-child(odd)
{
background:red;
}

table tr:nth-child(even)
{
background:blue;
}

Answer 2

大多数情况下，斑马条纹是通过在准备页面时为元素分配某些类来实现的。例如，如果您有以下结构

<div id='table'>
    <div class='row odd'></div>
    <div class='row even'></div>
    <div class='row odd'></div>
    <div class='row even'></div>
</div>

您只需创建一个CSS，根据.odd和.even选择器指定某些行属性。

还有一个选项可以使用JS / jQuery来完成这个后期处理，但这显然不是最好的方法。

表格背景颜色每隔一行更改一次

2 个答案: