title: How to highlight entire table cell on hover?
body: <p>I'm having a tiny issue where in my table I have gotten the entire TD clickable, and even managed to get the td:hover to work. </p>
  
  <p>However I've come across a point where I need to have blocks that say "Incomplete" (because I don't know how to hide cells without messing up the block sizes). How can I fix it where the entire cell highlights but doesn't highlight the Incomplete ones?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>td a:hover {
    background: #c2ceb5;
    display: block;
    width: 100%;
    height: 100%;
  }
  td a {
    display: block;
    width: 100%;
    height: 100%;
  }
  td {
    position: relative;
  }
  td a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table align="" style="border: 0px solid #ffffff; background-color: #5e913f;" class="mceEditable" border="1" cellpadding="5" cellspacing="0" height="207.75" width="1060"&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td style="text-align: center; border: 5px solid #ffffff; width: 250px;"&gt;
                  &lt;a class="" title="Super" href="http://handlingmod.jimdo.com/vehicle-list/super/adder/"&gt;&lt;span style="color: #ffffff;"&gt;Adder&lt;/span&gt;&lt;/a&gt;
              &lt;/td&gt;
              &lt;td style="text-align: center; border: 5px solid #ffffff; width: 250px;"&gt;
                  &lt;a class="" title="Super" href="http://handlingmod.jimdo.com/vehicle-list/super/vacca/"&gt;&lt;span style="color: #ffffff;"&gt;Vacca&lt;/span&gt;&lt;/a&gt;
              &lt;/td&gt;
              &lt;td style="text-align: center; border: 5px solid #ffffff; width: 250px;"&gt;
                  &lt;span style="color: #dddddd;"&gt;Uncomplete&lt;/span&gt;
              &lt;/td&gt;
              &lt;td style="text-align: center; border: 5px solid #ffffff; width: 250px;"&gt;
                  &lt;span style="color: #dddddd;"&gt;Uncomplete&lt;/span&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td style="text-align: center; border: 5px solid #ffffff; width: 250px;"&gt;
                 &lt;span style="color: #dddddd;"&gt;Uncomplete&lt;/span&gt;
              &lt;/td&gt;
              &lt;td style="text-align: center; border: 5px solid #ffffff; width: 250px;"&gt;
                 &lt;span style="color: #dddddd;"&gt;Uncomplete&lt;/span&gt;
              &lt;/td&gt;
              &lt;td style="text-align: center; border: 5px solid #ffffff; width: 250px;"&gt;
                 &lt;span style="color: #dddddd;"&gt;Uncomplete&lt;/span&gt;
              &lt;/td&gt;
              &lt;td style="text-align: center; border: 5px solid #ffffff; width: 250px;"&gt;
                &lt;span style="color: #dddddd;"&gt;Uncomplete&lt;/span&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td style="text-align: center; border: 5px solid #ffffff; width: 250px;"&gt;
                 &lt;span style="color: #dddddd;"&gt;Uncomplete&lt;/span&gt;
              &lt;/td&gt;
              &lt;td style="text-align: center; border: 5px solid #ffffff; width: 250px;"&gt;
               &lt;span style="color: #dddddd;"&gt;Uncomplete&lt;/span&gt;
              &lt;/td&gt;
              &lt;td style="text-align: center; border: 5px solid #ffffff; width: 0px;"&gt;
                 &lt;span style="color: #dddddd;"&gt;Uncomplete&lt;/span&gt;
              &lt;/td&gt;
              &lt;td style="text-align: center; border: 5px solid #ffffff; width: 0px;"&gt;
                 &lt;span style="color: #dddddd;"&gt;Uncomplete&lt;/span&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;p&gt;
      &lt;span style="color: #ffffff;"&gt;&amp;#160;&lt;/span&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>