为什么柱子颜色不同？

时间：2017-08-18 10:26:24

标签： html css

我已经用div制作了一张桌子，我希望每隔一行有不同的颜色。但每列都有不同的颜色。有什么问题？

＆＃13;
＆＃13; 
.mTable {
  display: table;
  width: auto;
  background-color: #eee;
  border: 1px solid #666666;
}

.mTableRow {
  display: table-row;
  width: auto;
  clear: both;
}

.mTableHeading {
  display: table-header-group;
  background-color: #ddd;
  height: auto;
  color: black;
  text-align: center;
  border-bottom: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

.mTableCell,
.mTableHead {
  display: table-cell;
  padding: 5px;
  border: 1px solid #999999;
  text-align: center;
  color: black;
  border-bottom: 1px solid #000000;
  width: 200px;
  background-color: #ccc;
}

.mTableRow>div:nth-child(even) {
  background: blue;
}
＆＃13; 
<div class="mTable">
  <div class="mTableRow">
    <div class="mTableHead">ID</div>
    <div class="mTableHead">Név</div>
    <div class="mTableHead">Komment</div>
    <div class="mTableHead">Tól</div>
    <div class="mTableHead">Ig</div>
  </div>
  <div class="mTableRow">
    <div class="mTableCell">9</div>
    <div class="mTableCell">Robi1 </div>
    <div class="mTableCell"> </div>
    <div class="mTableCell">null</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
  </div>
  <div class="mTableRow">
    <div class="mTableCell">31</div>
    <div class="mTableCell">FŰTÉS </div>
    <div class="mTableCell">Hőszivattyú teremhőmérsékletek</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
  </div>
  <div class="mTableRow">
    <div class="mTableCell">36</div>
    <div class="mTableCell">Növényház</div>
    <div class="mTableCell">Sablon komment</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
  </div>
  <div class="mTableRow">
    <div class="mTableCell">93</div>
    <div class="mTableCell">Üvegház</div>
    <div class="mTableCell">Sablon komment</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
  </div>
  <div class="mTableRow">
    <div class="mTableCell">94</div>
    <div class="mTableCell">Cserepes fűtés-hűtés</div>
    <div class="mTableCell">2017 február 9.-i állapott</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
  </div>
  <div class="mTableRow">
    <div class="mTableCell">95</div>
    <div class="mTableCell">Cserepes 2017</div>
    <div class="mTableCell">Sablon komment</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
  </div>
  <div class="mTableRow">
    <div class="mTableCell">96</div>
    <div class="mTableCell">3 fő helyiség</div>
    <div class="mTableCell">Sablon komment</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
  </div>
</div>
</div>
</div>
</div>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：9)

只是你的css错误替换为：

.mTableRow:nth-child(even) div {
    background: blue;
}

＆＃13;
＆＃13; 
.mTable {
  display: table;
  width: auto;
  background-color: #eee;
  border: 1px solid #666666;
}
.mTableRow {
  display: table-row;
  width: auto;
  clear: both;
}
.mTableHeading {
  display: table-header-group;
  background-color: #ddd;
  height: auto;
  color : black;
  text-align: center;
  border-bottom: 1px solid #000000;
  border-bottom: 1px solid #000000;
}
.mTableCell, .mTableHead {
  display: table-cell;
  padding: 5px;
  border: 1px solid #999999;
  text-align: center;
  color : black;
  border-bottom: 1px solid #000000;
  width: 200px;
  background-color: #ccc;
}

.mTableRow:nth-child(even) div {
  background: blue;
}
＆＃13; 
<div class="mTable">
    <div class="mTableRow">
        <div class="mTableHead">ID</div>
        <div class="mTableHead">Név</div>
        <div class="mTableHead">Komment</div>
        <div class="mTableHead">Tól</div>
        <div class="mTableHead">Ig</div>
    </div>
    <div class="mTableRow">
        <div class="mTableCell">9</div>
        <div class="mTableCell">Robi1 </div>
        <div class="mTableCell"> </div>
        <div class="mTableCell">null</div>
        <div class="mTableCell">null</div>
        <div class="mTableCell">
            <button class="w3-button w3-round-xxlarge w3-aqua">Választom</button>
        </div>
    </div>
    <div class="mTableRow">
        <div class="mTableCell">31</div>
        <div class="mTableCell">FŰTÉS </div>
        <div class="mTableCell">Hőszivattyú teremhőmérsékletek</div>
        <div class="mTableCell">null</div>
        <div class="mTableCell">null</div>
        <div class="mTableCell">
            <button class="w3-button w3-round-xxlarge w3-aqua">Választom</button>
        </div>
    </div>
    <div class="mTableRow">
        <div class="mTableCell">36</div>
        <div class="mTableCell">Növényház</div>
        <div class="mTableCell">Sablon komment</div>
        <div class="mTableCell">null</div>
        <div class="mTableCell">null</div>
        <div class="mTableCell">
            <button class="w3-button w3-round-xxlarge w3-aqua">Választom</button>
        </div>
    </div>
    <div class="mTableRow">
        <div class="mTableCell">93</div>
        <div class="mTableCell">Üvegház</div>
        <div class="mTableCell">Sablon komment</div>
        <div class="mTableCell">null</div>
        <div class="mTableCell">null</div>
        <div class="mTableCell">
            <button class="w3-button w3-round-xxlarge w3-aqua">Választom</button>
        </div>
    </div>
    <div class="mTableRow">
        <div class="mTableCell">94</div>
        <div class="mTableCell">Cserepes fűtés-hűtés</div>
        <div class="mTableCell">2017 február 9.-i állapott</div>
        <div class="mTableCell">null</div>
        <div class="mTableCell">null</div>
        <div class="mTableCell">
            <button class="w3-button w3-round-xxlarge w3-aqua">Választom</button>
        </div>
    </div>
    <div class="mTableRow">
        <div class="mTableCell">95</div>
        <div class="mTableCell">Cserepes 2017</div>
        <div class="mTableCell">Sablon komment</div>
        <div class="mTableCell">null</div>
        <div class="mTableCell">null</div>
        <div class="mTableCell">
            <button class="w3-button w3-round-xxlarge w3-aqua">Választom</button>
        </div>
    </div>
    <div class="mTableRow">
        <div class="mTableCell">96</div>
        <div class="mTableCell">3 fő helyiség</div>
        <div class="mTableCell">Sablon komment</div>
        <div class="mTableCell">null</div>
        <div class="mTableCell">null</div>
        <div class="mTableCell">
            <button class="w3-button w3-round-xxlarge w3-aqua">Választom</button>
        </div>
    </div>
</div>
</div>
</div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

你需要

.mTableRow:nth-child(odd) {
  background: #ccc;
}

.mTableRow:nth-child(even) {
  background: blue;
}

作为

.mTableRow>div:nth-child(even) {
  background: blue;
}

选择每个.mTableRow的偶数子而不是行本身。

.mTable {
  display: table;
  width: auto;
  background-color: #eee;
  border: 1px solid #666666;
}

.mTableRow {
  display: table-row;
  width: auto;
  clear: both;
}

.mTableHeading {
  display: table-header-group;
  background-color: #ddd;
  height: auto;
  color: black;
  text-align: center;
  border-bottom: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

.mTableCell,
.mTableHead {
  display: table-cell;
  padding: 5px;
  border: 1px solid #999999;
  text-align: center;
  color: black;
  border-bottom: 1px solid #000000;
  width: 200px;
}

.mTableRow:nth-child(odd) {
  background: #ccc;
}

.mTableRow:nth-child(even) {
  background: blue;
}
<div class="mTable">
  <div class="mTableRow">
    <div class="mTableHead">ID</div>
    <div class="mTableHead">Név</div>
    <div class="mTableHead">Komment</div>
    <div class="mTableHead">Tól</div>
    <div class="mTableHead">Ig</div>
  </div>
  <div class="mTableRow">
    <div class="mTableCell">9</div>
    <div class="mTableCell">Robi1 </div>
    <div class="mTableCell"> </div>
    <div class="mTableCell">null</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
  </div>
  <div class="mTableRow">
    <div class="mTableCell">31</div>
    <div class="mTableCell">FŰTÉS </div>
    <div class="mTableCell">Hőszivattyú teremhőmérsékletek</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
  </div>
  <div class="mTableRow">
    <div class="mTableCell">36</div>
    <div class="mTableCell">Növényház</div>
    <div class="mTableCell">Sablon komment</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
  </div>
  <div class="mTableRow">
    <div class="mTableCell">93</div>
    <div class="mTableCell">Üvegház</div>
    <div class="mTableCell">Sablon komment</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
  </div>
  <div class="mTableRow">
    <div class="mTableCell">94</div>
    <div class="mTableCell">Cserepes fűtés-hűtés</div>
    <div class="mTableCell">2017 február 9.-i állapott</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
  </div>
  <div class="mTableRow">
    <div class="mTableCell">95</div>
    <div class="mTableCell">Cserepes 2017</div>
    <div class="mTableCell">Sablon komment</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
  </div>
  <div class="mTableRow">
    <div class="mTableCell">96</div>
    <div class="mTableCell">3 fő helyiség</div>
    <div class="mTableCell">Sablon komment</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell">null</div>
    <div class="mTableCell"><button class="w3-button w3-round-xxlarge w3-aqua">Választom</button></div>
  </div>
</div>
</div>
</div>
</div>

答案 2 :(得分：0)

你的专栏因此而异：

$.getScript()

这会将.mTableRow>div:nth-child(even) { background: blue; } 索引处的每一列着色为even。 你的标题遗失了。

blue
.mTable {
  display: table;
  width: auto;
  background-color: #eee;
  border: 1px solid #666666;
}

.mTableRow {
  display: table-row;
  width: auto;
  clear: both;
}

.mTableHeading {
  display: table-header-group;
  background-color: #ddd;
  height: auto;
  color: black;
  text-align: center;
  border-bottom: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

.mTableCell,
.mTableHead {
  display: table-cell;
  padding: 5px;
  border: 1px solid #999999;
  text-align: center;
  color: black;
  border-bottom: 1px solid #000000;
  width: 200px;
  background-color: #ccc;
}

.mTableRow>div:nth-child(even) {
  background: blue;
}

答案 3 :(得分：0)

试试这个。 

    val sets = inputData.randomSplit(Array[Double](0.7, 0.3), 18)
    val training = sets(0)
    val test = sets(1)

相关问题
最新问题