Как выделить всю ячейку таблицы при наведении?

Question

У меня крошечная проблема, когда в моем столе я получил весь ТД, который можно было бы щелкнуть, и даже смог заставить td: hover работать.

Однако я столкнулся с точкой, где мне нужно иметь блоки, которые говорят «Неполные» (потому что я не знаю, как скрыть ячейки, не испортив размеры блоков). Как я могу исправить это, когда вся ячейка выделяется, но не выделяет неполные?

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

<table align="" style="border: 0px solid #ffffff; background-color: #5e913f;" class="mceEditable" border="1" cellpadding="5" cellspacing="0" height="207.75" width="1060"> 
 
    <tbody> 
 
     <tr> 
 
      <td style="text-align: center; border: 5px solid #ffffff; width: 250px;"> 
 
       <a class="" title="Super" href="http://handlingmod.jimdo.com/vehicle-list/super/adder/"><span style="color: #ffffff;">Adder</span></a> 
 
      </td> 
 
      <td style="text-align: center; border: 5px solid #ffffff; width: 250px;"> 
 
       <a class="" title="Super" href="http://handlingmod.jimdo.com/vehicle-list/super/vacca/"><span style="color: #ffffff;">Vacca</span></a> 
 
      </td> 
 
      <td style="text-align: center; border: 5px solid #ffffff; width: 250px;"> 
 
       <span style="color: #dddddd;">Uncomplete</span> 
 
      </td> 
 
      <td style="text-align: center; border: 5px solid #ffffff; width: 250px;"> 
 
       <span style="color: #dddddd;">Uncomplete</span> 
 
      </td> 
 
     </tr> 
 

 
     <tr> 
 
      <td style="text-align: center; border: 5px solid #ffffff; width: 250px;"> 
 
       <span style="color: #dddddd;">Uncomplete</span> 
 
      </td> 
 
      <td style="text-align: center; border: 5px solid #ffffff; width: 250px;"> 
 
       <span style="color: #dddddd;">Uncomplete</span> 
 
      </td> 
 
      <td style="text-align: center; border: 5px solid #ffffff; width: 250px;"> 
 
       <span style="color: #dddddd;">Uncomplete</span> 
 
      </td> 
 
      <td style="text-align: center; border: 5px solid #ffffff; width: 250px;"> 
 
       <span style="color: #dddddd;">Uncomplete</span> 
 
      </td> 
 
     </tr> 
 

 
     <tr> 
 
      <td style="text-align: center; border: 5px solid #ffffff; width: 250px;"> 
 
       <span style="color: #dddddd;">Uncomplete</span> 
 
      </td> 
 
      <td style="text-align: center; border: 5px solid #ffffff; width: 250px;"> 
 
      <span style="color: #dddddd;">Uncomplete</span> 
 
      </td> 
 
      <td style="text-align: center; border: 5px solid #ffffff; width: 0px;"> 
 
       <span style="color: #dddddd;">Uncomplete</span> 
 
      </td> 
 
      <td style="text-align: center; border: 5px solid #ffffff; width: 0px;"> 
 
       <span style="color: #dddddd;">Uncomplete</span> 
 
      </td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 

 
<p> 
 
    <span style="color: #ffffff;">&#160;</span> 
 
</p>

Answer 1

Смотрите, если это работает - http://jsfiddle.net/2pfL7toz/

td { 
    position: relative; 
    line-height: 60px; /*a bit hacky but works*/ 
} 
td a, td span { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    text-decoration: none; 
} 
td a:hover { 
    background: #c2ceb5; 
} 

Answer 2

Как насчет this?

CSS:

td a:hover { 
    background: #c2ceb5; 
    display: block; 
} 
td a, td span { 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    display: block; 
    padding-top:20px; 
} 
td { 
    position: relative; 
} 

Примечание: Это решение деградирует немного, если ваш текст оборачивает в клетке.