テーブル行は、上に乗って強調表示されません

Question

何らかの理由で、私は行全体をハイライト表示できません。 tdタグにカーソルを置くと、行の1つのセクションが強調表示されますが、テーブルの行全体をハイライト表示する必要があります。

    <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> 

... CSS

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

私の知る限り、あなたはTRは

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

Answer 2

試み追加しますがVue.jsは

HTMLを妨害すべきではない -

私はSASSとVue.jsを使用しています!importantのように、属性の最後にbackground-color: yellow !important;のように変更を強制します。