title: Unable to apply hover state to HTML table
body: <p>That's my CSS for styling up the HTML table. I guess something is messing the hover state.</p>
  
  <pre><code>.tg {
    border-collapse:collapse;
    border-spacing:0;
    border-color:#ccc;
  }
  
  .tg td {
    font-family: Arial, sans-serif;
    font-size: 14px;
    width: 150px;
    height: 10px;
    padding: 10px 5px;
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
    color: #333;
    background-color: #fff;
  }
  
  tr:hover {
    background-color:red !important;
  }
  </code></pre>
  
  <p>Since I don't get the desired effect of having a red background while hovering the line. Here's the HTML:</p>
  
  <pre><code>&lt;table class="tg"&gt;
    &lt;tr class='tr-031e'&gt;
      &lt;th class="tg-031e"&gt;&lt;b&gt;№&lt;/b&gt;&lt;/th&gt;
      &lt;th class="tg-031e"&gt;&lt;b&gt;Name&lt;/b&gt;&lt;/th&gt;
      &lt;th class="tg-031e"&gt;&lt;b&gt;Age&lt;/b&gt;&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr class='tr-031e'&gt;
      &lt;td class="tg-031e"&gt;&lt;input type='checkbox' name='person'&gt;&lt;/td&gt;
      &lt;td class="tg-031e"&gt;Guy&lt;/td&gt;
      &lt;td class="tg-031e"&gt;18&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>