Столбец не выделяется с зависанием над

Question

По какой-то причине я не могу выделить всю строку, чтобы выделить ее. Если я надену курсор на тег td, я могу выделить 1 часть строки, чтобы выделить, но я хочу выделить всю строку таблицы.

Я использую дерзость и Vue.js - но Vue.js не должны мешать

HTML ...

    <table id="tblData"> 
        <thead> 
         <tr> 
         <th v-for="column in columns"> 
         {{ column | uppercase }} 
          </th> 
          </tr> 
         </thead> 
        <tbody> 
        <tr v-for="tableData in tableData"> 
         <td> 
          {{ tableData.client }} 
         </td> 
         <td> 
          {{ tableData.ad }} 
         </td> 
         <td> 
          {{ tableData.rt }} 
         </td> 
        </tr> 
        </tbody> 
       </table> 

КСС

table { 
    border: 2px solid #000; 
    border-radius: 3px; 
    background-color: #fff; 

} 

th { 
    background-color: lightgrey; 
} 

td { 
    background-color: #f9f9f9; 
    /* 
    &:hover { 
    background-color: yellow; //makes just 1 element highlight on hover 
    } 
    */ 
} 

th, td { 
    min-width: 120px; 
    padding: 10px 20px; 
} 

tr:hover { 
    background-color: yellow; 
} 

Answer 1

AFAIK, вы не можете изменить цвет фона на тр, попробуйте следующий код, это изменит цвет фона каждого из т.д, когда тр наведен

tr:hover td { 
    background-color: yellow; 
} 

Answer 2

попробуйте добавить !important в конце атрибута, например background-color: yellow !important;, чтобы заставить произойти изменение.