Descripción del problema:
Debes indicar con precisión la jerarquía a la que quieres aplicar el estilo table#tableGral td
ya que tal y como está se aplicará a cualquier elemento <td>
que sea descendiente de table#tableGral
, sea cual sea el nivel de descendencia (tabla, sub tabla, sub sub tabla, etc) debido a tiene mayor prioridad este selector al que usaste en table.tableHija td
por tener una menor especificidad.
Indicando table#tableGral > tbody > tr > td
se aplicará únicamente a los elementos que sigan estrictamente ese orden de descendencia. Hay que tener en cuenta que, aunque no tengas un <tbody>
, debes indicarlo explícitamente en el selector de clase.
var obtenerSelector = (elemento) => {
var etiqueta = elemento.tagName.toLowerCase();
if (etiqueta == "html") {
return "html";
}
if (elemento.id != '') {
etiqueta += '#' + elemento.id;
} else if (elemento.className) {
etiqueta += '.'
+ elemento.className.replace(/\s+/g, '.');
}
return obtenerSelector(elemento.parentNode)
+ " > " + etiqueta;
}
/* Mostramos la ruta al elemento por consola */
console.log(
obtenerSelector(
document.getElementById('ejemplo')
)
);
#tableGral {
width: 100%;
border-collapse: collapse;
font-family: sans-serif;
font-size: 80%;
}
/* Especificamos la descendencia correctamente */
table#tableGral > tbody > tr > td {
border: 1px solid lightgrey;
white-space: nowrap;
vertical-align: top;
}
.tableHija {
border-collapse: collapse;
width: 100%;
}
/* Aquí también deberíamos hacerlo */
table.tableHija > tbody > tr > td {
margin-right: 7px;
font-size: 9px;
border: none;
}
<table id="tableGral">
<tr>
<td>Columna 1</td>
<td><table class="tableHija">
<tr>
<td>Columna 1 de la tabla hija</td>
<td id="ejemplo">Columna 2 de la tabla hija</td>
</tr>
</table></td>
<td>Columna 3</td>
</tr>
</table>
El código javascript que he agregado te muestra el selector o ruta al elemento <td>
de la subtabla, para que veas cómo existen elementos <tbody>
que se han creado implícitamente:
html > body > table#tableGral > tbody > tr > td
> table.tableHija > tbody > tr > td#ejemplo
De la documentación:
Cuando se emplea important
en una declaración de estilo, esta declaración sobrescribe a cualquier otra. Aunque técnicamente !important
no tiene nada que ver con especificidad, interactúa directamente con ésta. Sin embargo, el uso de !important
es una mala práctica y debería evitarse porque hace que el código sea más difícil de depurar al romper la cascada (artículo en inglés) natural de las hojas de estilo.
Un ejemplo del uso de !important
se muestra a continuación:
#tableGral {
width: 100%;
border-collapse: collapse;
font-family: sans-serif;
font-size: 80%;
}
table#tableGral td {
border: 1px solid lightgrey ;
white-space: nowrap;
vertical-align: top;
}
.tableHija {
border-collapse: collapse;
width: 100%;
}
table.tableHija td {
margin-right: 7px;
font-size: 9px;
/* Aquí indicamos que debe prevalecer por encima de otros */
border: 0px none !important;
}
<table id="tableGral">
<tr>
<td>Columna 1</td>
<td><table class="tableHija">
<tr>
<td>Columna 1 de la tabla hija</td>
<td id="ejemplo">Columna 2 de la tabla hija</td>
</tr>
</table></td>
<td>Columna 3</td>
</tr>
</table>
Pero sólo se debería usar !important
como último recurso, lo ideal es ser más conciso al establecer los estilos.