title: Table row not highlighting with hovered over
body: <p>For some reason I can't get my entire row to highlight.  If I put the hover on the td tag I can get 1 section of the row to highlight, but I want the entire row of the table to highlight.</p>
  
  <p>I'm using sass and Vue.js -  but the Vue.js shouldn't be interfering </p>
  
  <p>html...</p>
  
  <pre><code>                  &lt;table id="tblData"&gt;
                       &lt;thead&gt;
                           &lt;tr&gt;
                         &lt;th v-for="column in columns"&gt;
                           {{ column | uppercase }}
                             &lt;/th&gt;
                            &lt;/tr&gt;
                         &lt;/thead&gt;
                     &lt;tbody&gt;
                     &lt;tr v-for="tableData in tableData"&gt;
                        &lt;td&gt;
                            {{ tableData.client }}
                        &lt;/td&gt;
                        &lt;td&gt;
                            {{ tableData.ad }}
                        &lt;/td&gt;
                        &lt;td&gt;
                            {{ tableData.rt }}
                        &lt;/td&gt;
                     &lt;/tr&gt;
                     &lt;/tbody&gt;
                  &lt;/table&gt;
  </code></pre>
  
  <p>the CSS</p>
  
  <pre><code>table {
    border: 2px solid #000;
    border-radius: 3px;
    background-color: #fff;
  
  }
  
  th {
    background-color: lightgrey;
  }
  
  td {
    background-color: #f9f9f9;
    /*
    &amp;:hover {
      background-color: yellow;   //makes just 1 element highlight on hover
    }
    */
  }
  
  th, td {
    min-width: 120px;
    padding: 10px 20px;
  }
  
  tr:hover {
      background-color: yellow;
  }
  </code></pre>