html - tamaño - tablas responsivas css
Desplazamiento de CSS desactiva la tabla anidada (1)
Un método es hacer que el selector sea más restrictivo:
#product-table > tbody > tr:hover { background:#333; }
Demostración: http://jsfiddle.net/yrZ8R/2/
> indica que solo el hijo directo debe coincidir.
Ver también:
Tengo un problema con CSS :hover class. Cómo desactivo la segunda tabla :hover clase de :hover que está dentro de la segunda fila.
Aquí está el violín
HTML
<table border="0" width="100%" id="product-table">
<tr>
<td colspan="2">Title of the table</td>
</tr>
<tr>
<td width="20%"><b>Text text</b></td>
<td>someting about product</td>
</tr>
<tr>
<td><b>text text</b></td>
<td>
<table border="0" width="100%">
<thead>
<tr bgcolor="#ddd">
<td colspan="6"><strong>Title of inside</strong></td>
</tr>
<tr bgcolor="#efefef">
<td width="20%"><strong>No</strong></td>
<td width="20%"><strong>Date</strong></td>
<td width="20%"><strong>Define</strong></td>
</tr>
</thead>
<tbody id="hat_ekle">
<tr>
<td>123</td>
<td>2013</td>
<td>some text</td>
</tr>
<tr>
<td>234</td>
<td>2013</td>
<td>some text</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
CSS
#product-table tr:hover { background:#333; }