在动态生成的div表中替换颜色列

Question

我正在寻找替代div表列(不是行)示例列1红色…第二栏蓝色等

.divTable{
display: table;
width: 100.0%;
}
.divTableRow {
display: table-row;
}

.divTableCell{
background-color: #F7F8F8;
border-bottom: 1px solid #CCCCCC;
display: table-cell;
padding-top: 25px !important;
padding-bottom: 18px !important;
}

.divTableHead{
border-bottom: 1px solid #CCCCCC;
display: table-cell;
padding: 1px 1px;
}
.divTable h3{color: #376d1b;}
.divTableHeading, .divTableBody, .divTableFoot, .divTableRow{
clear: both;
}
.divTableHeading{
background-color: #000;
display: table-header-group;
font-weight: bold;

border-radius: 0;
background-color: black;
color: white;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
border: 0;

text-transform: uppercase;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}

<div class="divTable">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableHead">#</div>
<div class="divTableHead">col_red</div>
<div class="divTableHead">col_blue</div>
<div class="divTableHead blue">col_green</div>
<div class="divTableHead green">col_yellow</div>
</div>
</div>
<div class="divTableBody">
<div class='divTableRow'>
<div class='divTableCell'>1(4)</div>
<div class='divTableCell'>record</div>
<div class='divTableCell'>fail</div>
<div class='divTableCell'>return</div>
<div class='divTableCell'>fail</div>
</div>
</div>
</div>

Answer 1

您需要使用.divTableRow :nth-child(2) {background: red}将第二列变为红色，您可以对所有列执行此操作。

.divTable {
display: table;
width: 100.0%;
}
.divTableRow {
display: table-row;
}
.divTableCell {
background-color: #F7F8F8;
border-bottom: 1px solid #CCCCCC;
display: table-cell;
padding-top: 25px !important;
padding-bottom: 18px !important;
}
.divTableHead {
border-bottom: 1px solid #CCCCCC;
display: table-cell;
padding: 1px 1px;
}
.divTable h3 {
color: #376d1b;
}
.divTableHeading,
.divTableBody,
.divTableFoot,
.divTableRow {
clear: both;
}
.divTableHeading {
background-color: #000;
display: table-header-group;
font-weight: bold;
border-radius: 0;
background-color: black;
color: white;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
border: 0;
text-transform: uppercase;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
.divTableRow :nth-child(2) {background: red}
.divTableRow :nth-child(3) {background: blue}
.divTableRow :nth-child(4) {background: green}
.divTableRow :nth-child(5) {background: yellow}

<div class="divTable">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableHead">#</div>
<div class="divTableHead">col_red</div>
<div class="divTableHead">col_blue</div>
<div class="divTableHead blue">col_green</div>
<div class="divTableHead green">col_yellow</div>
</div>
</div>
<div class="divTableBody">
<div class='divTableRow'>
<div class='divTableCell'>1(4)</div>
<div class='divTableCell'>record</div>
<div class='divTableCell'>fail</div>
<div class='divTableCell'>return</div>
<div class='divTableCell'>fail</div>
</div>
</div>
</div>

Answer 2

您可以使用nth子https://www.w3.org/Style/Examples/007/evenodd.en.html

.divTableHead:nth-child(2n+3) {
background: hotpink;
}

同样适用于表列，但是文档中必须有一个与该列对应的元素。HTML为此提供了COL。表必须以每个列的一个COL开始:

.divTableHead:nth-child(2n+3) {
background: hotpink;
}

.divTable {
display: table;
width: 100.0%;
}

.divTableRow {
display: table-row;
}

.divTableCell {
background-color: #F7F8F8;
border-bottom: 1px solid #CCCCCC;
display: table-cell;
padding-top: 25px !important;
padding-bottom: 18px !important;
}

.divTableHead {
border-bottom: 1px solid #CCCCCC;
display: table-cell;
padding: 1px 1px;
}

.divTable h3 {
color: #376d1b;
}

.divTableHeading,
.divTableBody,
.divTableFoot,
.divTableRow {
clear: both;
}

.divTableHeading {
background-color: #000;
display: table-header-group;
font-weight: bold;
border-radius: 0;
background-color: black;
color: white;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
border: 0;
text-transform: uppercase;
}

.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}

.divTableBody {
display: table-row-group;
}

<div class="divTable">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableHead">#</div>
<div class="divTableHead">col_red</div>
<div class="divTableHead">col_blue</div>
<div class="divTableHead blue">col_green</div>
<div class="divTableHead green">col_yellow</div>
</div>
</div>
<div class="divTableBody">
<div class='divTableRow'>
<div class='divTableCell'>1(4)</div>
<div class='divTableCell'>record</div>
<div class='divTableCell'>fail</div>
<div class='divTableCell'>return</div>
<div class='divTableCell'>fail</div>
</div>
</div>
</div>

Answer 3

尝试使用nth-child():

.divTable{
display: table;
width: 100.0%;
}
.divTableRow {
display: table-row;
}

.divTableCell{
background-color: #F7F8F8;
border-bottom: 1px solid #CCCCCC;
display: table-cell;
padding-top: 25px !important;
padding-bottom: 18px !important;
}

.divTableHead{
border-bottom: 1px solid #CCCCCC;
display: table-cell;
padding: 1px 1px;
}
.divTable h3{color: #376d1b;}
.divTableHeading, .divTableBody, .divTableFoot, .divTableRow{
clear: both;
}
.divTableHeading{
background-color: #000;
display: table-header-group;
font-weight: bold;

border-radius: 0;
background-color: black;
color: white;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
border: 0;

text-transform: uppercase;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
.divTableCell:nth-child(5n){
background: yellow;
}

.divTableCell:nth-child(5n+1){
background: red;
}

.divTableCell:nth-child(5n+2){
background: blue;
}
.divTableCell:nth-child(5n+3){
background: orange;
}
.divTableCell:nth-child(5n+4){
background: green;
}

<div class="divTable">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableHead">#</div>
<div class="divTableHead">col_red</div>
<div class="divTableHead">col_blue</div>
<div class="divTableHead blue">col_green</div>
<div class="divTableHead green">col_yellow</div>
</div>
</div>
<div class="divTableBody">
<div class='divTableRow'>
<div class='divTableCell'>1(4)</div>
<div class='divTableCell'>record</div>
<div class='divTableCell'>fail</div>
<div class='divTableCell'>return</div>
<div class='divTableCell'>fail</div>
</div>
</div>
</div>

Answer 4

.divTableCell:nth-child(odd) {background-color: #f2f2f2;}

这将替换奇数列的颜色。您可以将even和odd设置为列中的不同颜色。