Как сделать каждую четную строку таблицы другого цвета?

Question

Подскажите , что я делаю не так , для того , чтобы менять четную строку , надо применить к tr:nth-child(2n) , но почему-то ничего не работает , что не так ?

const app = new Vue({
  el: '#app',
  data() {
    return {
      orders: [{Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000}, {Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000}, {Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000},{Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000},{Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000}, {Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000}, {Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000}]
    }
  },
  methods: {

  },
});

table {
   overflow: hidden;
   width: 1004px;
   height: 348px;
   border-radius: 24px;
   border: 1px solid grey;
   border-spacing: 8px;
}
th:nth-child(1) {
   width: 300px;
}
th:nth-child(2) {
   width: 109px;
}
th:nth-child(3) {
   width: 198px;
}
th:nth-child(4) {
   width: 206px;
}
td {
   height: 40px;
   background: rgba(72, 0, 255, 1);
   font-weight: 700;
   font-size: 20px;
   line-height: 24px;
   letter-spacing: -0.06em;
   color: #FFFFFF;
}
tr:nth-child(2n) {
    background-color:rgba(255, 0, 0, 1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
         <table>
            <tr>
               <th>Товар</th>
               <th>Колличество</th>
               <th>Цена закупки</th>
               <th>Цена продажи</th>
            </tr>
            <tr v-for="order in orders">
               <td>{{order.Nameorder}}</td>
               <td>{{order.amount}}</td>
               <td>{{order.Purchaseprice}}</td>
               <td>{{order.Sellingprice}}</td>
            </tr>
         </table>
      </div>

Answer 1

У вас уже есть стиль для td, поэтому вам надо переопределять цвет фона для td.
Написал еще один пример, что бы вторая строка была по "полезным" данным и не учитывала tr заголовка

const app = new Vue({
  el: '#app',
  data() {
    return {
      orders: [{Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000}, {Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000}, {Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000},{Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000},{Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000}, {Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000}, {Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000}]
    }
  },
  methods: {

  },
});

table {
   overflow: hidden;
   width: 1004px;
   height: 348px;
   border-radius: 24px;
   border: 1px solid grey;
   border-spacing: 8px;
}
th:nth-child(1) {
   width: 300px;
}
th:nth-child(2) {
   width: 109px;
}
th:nth-child(3) {
   width: 198px;
}
th:nth-child(4) {
   width: 206px;
}
td {
   height: 40px;
   background: rgba(72, 0, 255, 1);
   font-weight: 700;
   font-size: 20px;
   line-height: 24px;
   letter-spacing: -0.06em;
   color: #FFFFFF;
}
tr:nth-child(2n) td {
    background-color:rgba(255, 0, 0, 1);
}

#tbl tr:nth-child(2n) td {
    background-color:rgba(100, 0, 150, 0.5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
         <table>
           <tr>
           <th>Товар</th>
           <th>Колличество</th>
           <th>Цена закупки</th>
           <th>Цена продажи</th>
          </tr>
          <tr v-for="order in orders">
             <td>{{order.Nameorder}}</td>
             <td>{{order.amount}}</td>
             <td>{{order.Purchaseprice}}</td>
             <td>{{order.Sellingprice}}</td>
            </tr>
         </table>

         <table id='tbl'>
            <thead>
               <tr>
               <th>Товар</th>
               <th>Колличество</th>
               <th>Цена закупки</th>
               <th>Цена продажи</th>
               </tr>
            </thead>
            <tbody>
            <tr v-for="order in orders">
               <td>{{order.Nameorder}}</td>
               <td>{{order.amount}}</td>
               <td>{{order.Purchaseprice}}</td>
               <td>{{order.Sellingprice}}</td>
            </tr>
            </tbody>
         </table>
      </div>

БЛОГ НА HUSL

Как сделать каждую четную строку таблицы другого цвета?

Ответы (1 шт):